2016-08-20 96 views
2

我想知道是否有人知道如何居中左对齐的文本。这里是我的意思的一个例子:如何在div的中心有左对齐的文本?

This text 
is 
left aligned. 

            This text 
            is 
            left aligned 
            and in 
            the center (isn). 

我怎么能在一个div里面做?我已经尝试了我见过的任何一个答案,即将text-align放置在父div中,然后放在div div中放置text-align:left,但这似乎不起作用。这里有一个例子:http://codepen.io/nrojina0/pen/OXGdXJ

div#stores { 
 
    font-size: 1.25em; 
 
    width: 100%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
div#storesleft { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 33%; 
 
    text-align: left; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
}
<div id="stores"> 
 

 
    <div id="storesleft"> 
 

 
    Boo and Roo's 
 
    <br>112 E. Moore St. 
 
    <br>Southport, NC 28461 
 
    <br>(910)363-4275 
 
    <br> 
 
    </div> 
 

 
</div>

回答

3

我想知道是否有人知道如何中心,这是左对齐文本。

刚刚从“中心”的孩子取出float ..

“定心的第一条规则是...不要使用浮动!”

div#stores { 
 
    font-size: 1.25em; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 1em; 
 
} 
 
div#storesleft { 
 
    display: inline-block; 
 
    width: 33%; 
 
    text-align: left; 
 
    margin: 0 auto; 
 
}
<div id="stores"> 
 

 
    <div id="storesleft"> 
 

 
    Boo and Roo's 
 
    <br>112 E. Moore St. 
 
    <br>Southport, NC 28461 
 
    <br>(910)363-4275 
 
    <br> 
 
    </div> 
 

 
</div>

我想留在这三个孩子的div的文本对齐,但仍处于div的中心。我会怎么做?

从你修订要求(在评论)我会使用Flexbox的避免必须添加额外的包装。

演示使用需要额外的包装:Codepen Demo

Flexbox的演示:

div#stores { 
 
    font-size: .85em; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 
div#storesleft { 
 
    border: 1px solid black; 
 
} 
 
div#storescenter { 
 
    border: 1px solid black; 
 
} 
 
div#storesright { 
 
    border: 1px solid black; 
 
}
<div id="stores"> 
 

 
    <div id="storesleft"> 
 

 
    Boo and Roo's 
 
    <br>112 E. Moore St. 
 
    <br>Southport, NC 28461 
 
    <br>(910)363-4275 
 
    <br> 
 
    </div> 
 

 
    <div id="storescenter"> 
 

 
    Natural Food Store 
 
    <br>1920 U.S. Hwy 70 SW 
 
    <br>Hickory, NC 28602 
 
    <br>(828)322-5316 
 
    <br> 
 
    </div> 
 

 
    <div id="storesright"> 
 

 
    Routh's Grocery 
 
    <br>3796 Chatham Street 
 
    <br>Bennett, NC 27208 
 
    <br>(336)581-3465 
 
    <br> 
 

 
    </div> 
 

 
</div>

+0

卸下浮动只是居中DIV,而不是文字。我已经更新了代码笔,因为它最初只有一个div,而不是现在的3,所以你可以看到删除浮动并不能解决我的问题。 – nrojina0

+0

这就是为什么我有3个孩子的div?我希望三个子div中的每个子文本都保持对齐,但仍然位于div的中心。我会怎么做? – nrojina0

+0

在你的代码笔上,我期望让这3个子div被均匀分布在整个网页的宽度上 – nrojina0