当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Center align div in both medium and small displays

问题描述:

I have the following content:-

<div>

<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>

Is there a way to center align the above div for both laptop and mobile displays? I want the inner div's to be on the same line. My current code is doing that. So I just want the whole div to be centered aligned in a page.

网友答案:

You can do it by aligning the main parent div to center (i.e. .holder) using text-align: center.

And vertical-aligning both the children <div>s to middle (i.e. .content-holder and .title-holder) using vertical-align: middle.

Have a look at the below code:

/* 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>
网友答案:

put a text-align:center rule on the containing wrapper. should look like this.

<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>
网友答案:

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>
网友答案:

You might consider using display:flex

check this snippet

.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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: