2016-08-20 21 views
2

誰かが左揃えのテキストを中央に揃える方法を知っているのだろうかと思っていました。ここに私が意味するものの例があります:divの中央に左揃えのテキストを配置するにはどうすればよいですか?

This text 
is 
left aligned. 

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

私はどのようにしてdiv内でそれを行うことができますか?私はテキストアライメントを置くことです私はどこでも見た1つの答えを試してみました:親divの中に中心を置いて、次にdivのテキストを置く: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を使用していない...です!」

..「中心」子供から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の中央に、3つのdivのそれぞれのテキストが左詰めされたいです。どうすればいい?あなたのから

は、私は、追加のラッパーを追加する必要が回避するために、フレキシボックスを使用すると思います(コメントで)要件を改正しました。必要な追加のラッパーと

デモ:Codepen Demo

フレキシボックスデモ:floatを削除

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要素ではなく、テキストを中央に配置します。私は最初にコードペンを更新しました.3つではなく、1つのdivしか持っていなかったので、フロートを削除しても問題は解決しないことがわかります。 – nrojina0

+0

なぜ3つの子divがあるのですか?私は、3つの子divのそれぞれのテキストを左揃えにしたいが、divの中心に置いておきたい。どうすればいい? – nrojina0

+0

あなたのコードペンで、私は3つの子divが均等にウェブページの幅を横切るようにしたいと思っています – nrojina0

関連する問題