无法将文本与图片垂直对齐

Unable to vertically align text against picture

本文关键字：垂直对齐文本更新时间：2023-09-26

我一直试图让文本与图片垂直对齐（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;
  }

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

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