文章/答案/技术大牛

发布

社区首页 >问答首页 >在剖面中居中旋转木马(css 3d)

问在剖面中居中旋转木马(css 3d)
EN

Stack Overflow用户

提问于 2016-07-27 05:40:28

回答 1查看 66关注 0票数 0

我正在尝试创建一个个人资料网站。然而，我似乎碰壁了；我无法想出一种方法，使我的旋转木马中心本身在我的部门。

有人对我能做些什么有什么建议吗？

下面是一个带有代码的代码：https://codepen.io/Todai/pen/RRPGwZ

下面是我的.html：

<html>

<head>
<link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/flipCardCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<div class="container-fluid">
  <header id="banner">
    <div class="container">
      <div class="col-md-2">
        <!-- <a href="#"> <span id="link"> -F </span> </a> -->
        <img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg">
      </div>
      <div class="col-md-10">
        <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
        <span class="sr-only"> Toggle navigation </span>
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
      </button>
        <nav id="navbar" role="navigation" class="collapse navbar-collapse" aria-expanded="false">
          <ul class="nav navbar-nav navbar-right">
            <li class="active">
              <a href="#top" class="scrollable"> About </a>
            </li>
            <li class>
              <a href="#portfolio" class="scrollable"> Portfolio </a>
            </li>
            <li class>
              <a href="#contact" class="scrollable"> Contact </a>
            </li>
          </ul>
        </nav>
      </div>
      <a id="top" name="home"> </a>
      </header>
      <main >
        <header class="row customClass">
          <div class="intro-text col-md-8" >
          <p class="text-right">
            My name is <strong> J</strong>oakim <strong>K</strong>akaei, I'm a Software Engineer with knowledge of most main-stream languages as well as some more obscure. I have experience working with c++, c#, java amongst many other; working knowledge of project management and methodologies.
          </p>
            <hr class="star-bright">
            </hr>
           <span class="skills">
             Software Engineer - Web Developer - Security Hobbyist
          </span>
          </div>
        <div class="col-md-4">
            <img src="http://res.cloudinary.com/todai/image/upload/v1464900561/12976795_10208023281372738_6826518550098825642_o_e2brh3.jpg"  alt>
        </div>
        </header>

      <section id="Portfolio">
        <h2> Portfolio </h2>
        <hr class="star-dark"/>
        <div class="container center">
            <div class="prev">Prev</div>
              <div class="carousel">
                <div class="item a">
                  <div id="f1_container">
                    <div id="f1_card" class="shadow">
                      <div class="front face">
                          <img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png"/>
                            </div>
                            <div class="back face center">
                              <p>A distributed software built in Erlang, using a MSSQL instance and
                                  a C# Web Api end-point.</p>
                              <p>I was in charge with working on the Android and web front-end.</p> 
                        <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                      </div>
                    </div>
                </div>
                </div>
                <div class="item b">
                  <div id="f1_container">
                    <div id="f1_card" class="shadow">
                      <div class="front face">
                          <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png"/>
                            </div>
                            <div class="back face center">
                              <p>A distributed software built in Erlang, using a MSSQL instance and
                                  a C# Web Api end-point.</p>
                              <p>I was in charge with working on the Android and web front-end.</p> 
                        <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                      </div>
                    </div>
                </div>
                </div>
                <div class="item c">
                    <div id="f1_container">
                      <div id="f1_card" class="shadow">
                        <div class="front face">
                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                              </div>
                              <div class="back face center">
                                <p>A distributed software built in Erlang, using a MSSQL instance and
                                    a C# Web Api end-point.</p>
                                <p>I was in charge with working on the Android and web front-end.</p> 
                          <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="item d">
                    <div id="f1_container">
                      <div id="f1_card" class="shadow">
                        <div class="front face">
                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                              </div>
                              <div class="back face center">
                                <p>A distributed software built in Erlang, using a MSSQL instance and
                                    a C# Web Api end-point.</p>
                                <p>I was in charge with working on the Android and web front-end.</p> 
                          <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="item e">
                    <div id="f1_container">
                      <div id="f1_card" class="shadow">
                        <div class="front face">
                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                              </div>
                              <div class="back face center">
                                <p>A distributed software built in Erlang, using a MSSQL instance and
                                    a C# Web Api end-point.</p>
                                <p>I was in charge with working on the Android and web front-end.</p> 
                          <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="item f">
                  <div id="f1_container">
                    <div id="f1_card" class="shadow">
                      <div class="front face">
                          <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                            </div>
                            <div class="back face center">
                              <p>A distributed software built in Erlang, using a MSSQL instance and
                                  a C# Web Api end-point.</p>
                              <p>I was in charge with working on the Android and web front-end.</p> 
                        <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                      </div>
                  </div>
                </div>
                </div>
              </div>

            <div class="next">Next</div>
            </div>

    </section>
      </main>
  </div>
</div>


</div>
</body>

</html>
<script src="resources/scripts/carousel.js"> </script>

twitter-bootstrap

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-27 05:45:40

这是一种将相对定位的元素水平居中的简单方法：

   .carousel {
        position: relative;
        margin: 0 auto;
    }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38600347

复制

相似问题

问在剖面中居中旋转木马(css 3d)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在剖面中居中旋转木马(css 3d)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在剖面中居中旋转木马(css 3d)
EN