2つの浮動タグを中央に配置できないようです

divの各項目の隣にある2つの項目をそれぞれ<img>と<h1>にフロートさせようとしています。私はinline-blockを試していますが、動作していないようです。私は<img>と<h1>をそのdivの中央に配置したいと思っています。また、それができる場合は、<h1>が左に<img>の中心であっても欲しいです。下から上へ等間隔。2つの浮動タグを中央に配置できないようです

body { 
 
    background-color: #FDFDFD; 
 
    font-family: 'Audiowide', cursive; 
 
    margin: 0; 
 
} 
 

 
.yaboi, 
 
.hd2 { 
 
    background-color: white; 
 
    width: 80%; 
 
    margin: auto; 
 
    height: 100%; 
 
} 
 

 
.plswork { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    /* display:inline-block; */ 
 
} 
 

 
.yaboi .plswork h1 { 
 
    display: inline-block; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
.yaboi .plswork img { 
 
    display: inline-block; 
 
    width: 50%; 
 
    float: left; 
 
}

<body style="background-color: #f2f2f2;"> 
 
    <div class="yaboi"> 
 
    <div class="plswork"> 
 
     <img src="188104.jpg" alt="PC with keyboard and mouse" /> 
 
     <h1>Falcon Tech</h1> 
 
    </div> 
 
    </div> 
 
    <div class="hd2"> 
 
    </div> 
 
</body>

出典

2017-11-16 ConfusedCodeCat

これを行うには、いくつかの方法があります。

.plswork { 
    text-align: center; 
} 
.plswork img, 
.plswork h1 { 
    display: inline-block; 
    vertical-align: middle; 
} 

<div class="plswork"> 
    <img src="http://via.placeholder.com/100x10"> 
    <h1>Falcon Tech</h1> 
</div>

フィドル：https://jsfiddle.net/4s4Lmhnn/

フロート通常水平センタリングには適していませんので、あなたは意志あなたは、この使用してインラインブロック要素を達成しようとしていることを述べたので、私が最初にそれを行う方法を示しています私の解決策は浮動小数点を利用しないことに注意してください。

あなたの質問から、水平または垂直のセンタリングが含まれているかどうかは不明です。私は、水平方向のセンタリングのみを望むと仮定しましたが、私の解はimgとh1を互いに垂直に揃えています。

は場合は、代わりに、あなたはその後、フレキシボックスは良いオプションがあり、両方の要素が縦に未知の高さの容器の内部中央にする必要があります

.plswork { 
    display: flex; 
    height: 200px; 
    align-items: center; 
    justify-content: center; 
}

フィドル：それは働いたhttps://jsfiddle.net/3hxb2xo3/2/

出典

2017-11-16 03:42:59

聖モリ、ありがとうございました！私は垂直方向のタグを知っている、もう一度ありがとう。 – ConfusedCodeCat

2つの浮動タグを中央に配置できないようです

答えて

関連する問題