センターは、私は、次の内容を持っている

Question

中小両方のディスプレイにdiv要素を揃えますか？内側のdivが同じ行にあることを望みます。私の現在のコードはそうしています。だから私は、div内のすべてのページを一列に整列させたい。

Answer 1

含まれているラッパーにtext-align：centerルールを置きます。 は次のようになります。

<div style="text-align:center"> 
    <div style="display:inline-block;vertical-align:top;"> 
     <a href="http://sunlightfoundation.com/" target="_blank"><img src="images/logo.png" style="display: inline"></a> 
    </div> 
    <div style="display:inline-block;"> 
     <h4><b>Congress API</b></h4> 
    </div> 
</div> 

Answer 2

あなたはtext-align: centerを使用して中央にメインの親のdiv（すなわち、.holder）を揃えることによってそれを行うことができます。 vertical-align: middleを使用して中央に

および垂直整列子供<div>の両方（すなわち、.content-holderと.title-holder）。

/* Parent Element */ 
 
.holder { 
 
    text-align: center; 
 
} 
 

 
/* Child Elements */ 
 
.content-holder, 
 
.title-holder { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="holder"> 
 
    <div class="content-holder"> 
 
    <a href="http://sunlightfoundation.com/" target="_blank"> 
 
     <img src="http://placehold.it/50x50" style="display: inline"> 
 
    </a> 
 
    </div> 
 
    <div class="title-holder"> 
 
    <h4><b>Congress API</b></h4> 
 
    </div> 
 
</div>

・ホープ、このことができます：

は、以下のコードを見てください！

Answer 3

div { 
 
    text-align:center; 
 
} 
 
a img { 
 
    height:50px; 
 
}

<div> 
 
    <div style="display:inline-block;vertical-align:top;"> 
 
     <a href="http://sunlightfoundation.com/" target="_blank"><img src="http://www.freeiconspng.com/uploads/camera-icon--long-shadow-ios7-iconset--pelfusion-30.png" style="display: inline"></a> 
 
    </div> 
 
    <div style="display:inline-block;"> 
 
     <h4><b>Congress API</b></h4> 
 
    </div> 
 
</div>

Live view

あなたはこのCSSスタイルを使用する必要があります。

div { 
    text-align:center; 
} 

Answer 4

あなたは、ディスプレイを使用して検討するかもしれない：

チェックにこのスニペットを曲げる

.container{ 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 
.imageClass{ 
 
    display:flex; 
 
    align-items:center; 
 
}

<div class="container"> 
 
    <div class="imageClass"> 
 
    <a href="http://sunlightfoundation.com/" target="_blank"> 
 
     <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="image" height="26px" width=26px> 
 
    </a> 
 
    </div> 
 
    <div> 
 
    <h4><b>Congress API</b></h4> 
 
    </div> 
 
</div>

が（それは[モバイルデバイス上の現在のビューポートの中心でshow DIV]