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行上的文本對齊

回答

相關問題