2016-05-14 86 views
1

我一直在試圖讓文字垂直對齊(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; 
    } 

回答

1

通常情況下你的文本將在一個充滿按照它的寬度。所以,你可以減少寬度,因爲它只容納一個字符。

通過這樣做,您可以實現文本的垂直對齊。

+0

請不要混淆滾動選項! :) –