Question

我一直试图让文本与图片垂直对齐（90度），但遗憾的是我还没有找到一个响应灵敏且工作正常的解决方案。告诉我你们在想什么！ HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,     maximum-scale=1">
  <!-- Bootstrap main css -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Custom css -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/normalize.css">

<!--bootstrap-->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>

</head>

 <body class = "loading">
<div id="preload">
          <img src="img/bcg_slide-1.jpg">
 </div>
 <main>
 <!--Navigation Menu -->
   <nav class="navbar navbar-fixed-top" >
     <div class="container-fluid">
     <div class="navbar-header">
       <a href="index.html" class="navbar-brand" style="font-size:   35px; font-family: crimson-text; letter-spacing: 3px; color: #fff;" ><span  style = "color: #fff;">Random</span> Name</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">

        </div>
      </div>
   </nav>

     <section id="slide-1" class="homeSlide">
            <div class="hsContainer">
             <div class="bcg">

             </div>
            </div>
           <div class="displayContent">

             <ul class = "rotate" style="background-color: #000; float: left;">
                <li><a>ABOUT ME</a></li>
                <li><a>PROJECTS</a></li>
                <li><a>RESUME</a></li>
              </ul>

        </div>

    </section>




 </main>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
       <script src="js/imagesloaded.js"></script>
       <script src="js/skrollr.js"></script>
       <script src="js/_main.js"></script>


 </body>
</html>

CSS：

body {
     margin: 0;
    padding: 0;
    color: #ffffff;
    padding-bottom: 60px;
    margin-bottom: 60px;
 }  

 .navbar a {
  font-size: 35px;
   padding-left: 65px;
  padding-top: 50px;
    font-weight: normal;
  opacity: 100%;
}

.navbar {
  background-color: rgba(0,0,0, 0.0);

}
 .no-js {
  padding-top: 106px;
}
h2 {
  margin-top: 0;
}
.loading {
  background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
  min-width: 100%;
  opacity: 0;
 }

.loaded section,
.no-js section {
  opacity: 1;
  -webkit-transition: opacity 300ms ease-out;
  -moz-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

#preload {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;

 }
 .bcg {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  height: 100%;
  width: 50%;

}

.hsContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
 .displayContent{
    background-color: #fff; 
    height: 100%; 
    left: 50%; 
    top: 0; 
    bottom: 0;
    float: left; 
    width: 50%; 
    position: absolute;
    background-color: #0909fd
  }



 .rotate {
   /* FF3.5+ */
   -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter:      "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
   /* Standard */
   transform: rotate(-90.0deg);
 }
 /* Slide 1 */
 #slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')}
 #slide-1 .hsContent {
   bottom: 200px;
   top: auto;
  }

 .rotate li {
   top: 50px;
   display: inline;
   padding: 10px;
  text-decoration: none;
   background-color: #000;
  }

Answer 1

通常，您的文字将根据其宽度填充。因此，您可以减少宽度，因为它只容纳一个字符。

通过这样做，您可以实现文本的垂直对齐。

无法垂直对齐图片

1 个答案: