2行上的文本对齐

我有四个文本元素，其中一些文本有两行。我想将文本放置在元素的中心，这是我用文本对齐完成的。但是，我想将两行文本左对齐，因此它与左边齐平。2行上的文本对齐

像这样：

首行文字

第二行文字

HTML：

<body> 
    <div id='nw' class='bg'> 
     <div class='overlay'> 
      <span class='caption'>Night <br /> Life</span> 
     </div> 

    </div> 
    <div id='ne' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>News</span> 
     </div> 
    </div> 
     <div id='sw' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>Food & Drink</span> 
     </div> 
    </div> 
     <div id='se' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>Events</span> 
     </div> 
    </div> 
    </body>

CSS：

body { 
    background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg'); 
    height:100%; 
    margin:0; 
    padding:0; 
} 
div.bg { 
    position:fixed; 
    width:50%; 
    height:50% 
} 
#nw { 
    top:0; 
    left:0; 
    background-image: url('clevelandnight.jpg'); 
    background-size:cover; 
    text-align: center; 
    text-align-last:left; 
} 
#ne { 
    top:0; 
    left:50%; 
    background-image: url('news1.jpg'); 
    background-size:cover; 
} 
#sw { 
    top:50%; 
    left:0; 
    background-image: url('drinks1.jpg'); 
    background-size:cover; 
    text-align: center; 
} 
#se { 
    top:50%; 
    left:50%; 
    background-image: url('clevelandday.jpg'); 
    background-size:cover; 
    text-align: center; 
} 
.overlay { 
    height:100%; 
    -webkit-transition: all .4s ease-out; 
    -moz-transition: all .4s ease-out; 
    -o-transition: all .4s ease-out; 
    -ms-transition: all .4s ease-out; 
    transition: all .4s ease-out; 
} 
.bg:hover .overlay { 
    background:rgba(0, 0, 0, .75); 
    opacity: 1; 
    height:100%; 
} 
.caption { 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-weight:100; 
    color:white; 
    z-index:100; 
    font-size:24pt; 
    -webkit-transition: font-size .4s ease-out 1s; 
    -moz-transition: font-size .4s ease-out 1s; 
    -o-transition: font-size .4s ease-out 1s; 
    -ms-transition: font-size .4s ease-out 1s; 
} 
.bg:hover .caption { 
    font-size:72px; 
}

来源

2014-09-21 czmudzin

您可以添加text-align: left和display: inline-block到内span元素：

.overlay span{ 
    text-align:left; 
    display: inline-block; 
}

http://jsfiddle.net/nj1pnnoj/2/

来源

2014-09-21 08:12:24 pckill

感谢。我也可以通过创建另一个班级和使用职位来实现这一点：固定;右：50％; – czmudzin 2014-09-21 08:18:08

2行上的文本对齐

回答

相关问题