コードが示すように、私は私のhtmlでの2つの段落を持って

Question

ボックスの内容を整列させる方法：

<div class="mainhead"> 
    <p class="paragraph">This is a paragraph</p> 
    <div class="info"> 
      <p><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span></p> 
     </div> 
</div><!-- end of mainhead --> 

をそして次は、CSSです：私はdiv要素を揃えることができますどのように

.mainhead { 
    background-color: #d9edf7; 
    width: 100%; 
    display: flex; 
} 
.info{ 
    text-align: right; 
} 
.mainhead .parapgraph{ 
    text-align: center; 
} 

情報を一番右に表示し、段落を中央に置いておきますか？ pは完全に中央とあなたがposition: absoluteを使用して、ちょうど.infoにfloat: rightを追加することができます.infoの幅によって影響を受けないようにするにはhttps://jsfiddle.net/Wosley_Alarico/60a8qw5L/

Answer 1

：ここ

も私のjsfiddleを行きます。 overflow: hiddenを使用してフロートをクリアし、高さを固定することもできます。

.mainhead { 
 
    background-color: #d9edf7; 
 
    width: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.mainhead > p { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; 
 
} 
 
.info { 
 
    float: right; 
 
}

<div class="mainhead"> 
 
    <p>This is a paragraph</p> 
 
    <div class="info"> 
 
    <p><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span> 
 
    </p> 
 
    </div> 
 
</div>

あなたは.infoの幅を引いたときに残された空間でparagraphを中央にしたいなら、あなたはFlexboxを使用するとマージンauto

.mainhead { 
 
    background-color: #d9edf7; 
 
    display: flex; 
 
} 
 
.mainhead > p, .info { 
 
    margin-left: auto; 
 
}

<div class="mainhead"> 
 
    <p>This is a paragraph</p> 
 
    <div class="info"> 
 
    <p><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span> 
 
    </p> 
 
    </div> 
 
</div>

を追加することができます

Answer 2

試してみてください

インラインスタイルを避けるために、pタグにクラスを追加することもできます。

<div class="mainhead"> 
    <div class="info"> 
     <p style=" display: inline-block;">This is a paragraph</p> 
     <p style="float: right; display: inline-block;"><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span></p> 
    </div> 
</div> 

.info { 
    text-align: center; 
     background-color: #d9edf7; 
} 

Answer 3

あなたは右端にそれを置くためにposition: absouteとright: 0pxを使用することができます。

.info{ 
    position: absolute; 
    right: 0px; 
    width: 300px; 
} 

そして、あなたはこのJSFiddleで見ることができると同じように、段落のために、あなたはtext-align: center;

p { 
    text-align: center; 
} 

を使用することができます。https://jsfiddle.net/davidgourde/afsoq8du/

あなたが上にそれらの両方を持っているしたい場合はfloat: rightを使用することができますお互いに

Answer 4

はここ

.mainhead { 
    background-color: #d9edf7; 
    width: 100%; 
    height:100px; 
} 
p{ 
    text-align:center;/*Use this for both p tag text-align center*/ 
} 
.info{ 
    float:right; 
    width:100%; 
    /*text-align:center;*/ /*Use this if you want p text-align center of .info p tag*/ 
} 

Answer 5

はフレキシボックスとソリューションで、これを試してみてください。

.mainhead { 
 
     background-color: #d9edf7; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.mainhead p:first-child { flex: 1; text-align: center; } 
 
.info{ 
 
\t text-align: right; 
 
    flex: none; 
 
} 
 
.mainhead img{ 
 
\t text-align: center; 
 
}

<div class="mainhead"> 
 
    \t \t \t <p>This is a paragraph</p> 
 
    \t \t \t <div class="info"> 
 
    \t \t \t \t <p><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span></p> 
 
    \t \t \t </div> 
 
    \t \t </div>

あなたは情報DIVにいくつかのmax-widthを追加することができます。以下のコードを確認してください。