2017-11-23 50 views
0

これは何度も尋ねられましたが、解決策のどれも私のために働いていません。あなたがフィドルで見ることができるように、これは私がChromeでそれをどのようにしたいのか正確に動作していますが、IEではテキストが真ん中にではなくボックスの上部に詰まっています。 IEブラウザとChromeでそれを実行すると、私の言いたいことがわかります。私はマージンを使用して正確に真ん中にしたい:auto;クロムで完璧に動作しますが、IEではそうはしません。パラグラフを下に移動させて、縦方向と横方向の中間に配置されるように修正されているかどうかはわかりません。IEのdivの中にテキストを垂直に配置する方法は?

<section class="info"> 
<p class="infofont">Size: Large<br><br> 
100% Cotton<br><br> 
Excellent Condition! 
</p> 

</section> 

CSS:

.info{ 
display:flex; 
width:325px; 
margin:auto;  
} 

.infofont{ 
font-weight:bold; 
text-align:center; 
margin:auto; 
} 

https://jsfiddle.net/fmu8g38h/

+0

あなたのフィドルは、500pxの高さが.infoに設定されています。これがなければ、どのブラウザでも動作しません。垂直配置のプロパティを設定する必要があるhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/を参照してください。一部のブラウザでは古い構文が必要な場合があります。 –

答えて

1

マージン:オートが水平にテキストを整列させるために使用されます。中央に整列する

上部は別々

0

を整列しなければならない代わりにこれを試してください:あなたは中央に縦方向に整列する意味場合

.info{ 
    display:flex; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
    position:absolute; 
} 

https://jsfiddle.net/k1cbjvj7/1/

-1

Supppose、あなたが使用することができますline-height CSSプロパティーを使用してこのタスクを実行します。あなたがしなければならないことは、element.Works商品の高さと同じになるように設定するだけです。また、センター使用マージンを自動調整するためにも使用します。

1

あなたはdisplayflexで、内部のコンテンツはverticallyhorizontallyセンターとなり、あなたが.infofontclassからmargin: auto;を削除する必要があるときのためにflex-direction: row/column; align-items: center; justify-content: center;を書くのを忘れていました。

以下は、お客様のCSSコードの更新です。

.info{ 
    border: 1px solid black; 
    align-items: center; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    width: 325px; 
    margin:auto auto; 
    height: 500px; 
} 

.infofont{ 
    font-weight:bold; 
    text-align:center; 
} 

.info{ 
 
    border: 1px solid black; 
 
    align-items: center; 
 
\t display:flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
\t width:325px; 
 
\t margin:auto auto; \t 
 
    height:500px; \t 
 
} 
 

 
.infofont{ 
 
    color: green; 
 
    font-size: 16px; 
 
\t font-weight:bold; 
 
    line-height: 1.2; 
 
    margin: 0; 
 
\t text-align:center; 
 
} 
 

 
*, 
 
*:after, 
 
*:before{ 
 
    box-sizing: inherit; 
 
} 
 
html{ 
 
    box-sizing: border-box; 
 
}
<section class="info"> 
 
<p class="infofont">Size: Large<br><br> 
 
100% Cotton<br><br> 
 
Excellent Condition! 
 
</p> 
 
    
 
</section>

切り取ら注確認:私はこのコードだけIE11、ChromeとSafariのテストを。

関連する問題