Question

我有以下内容： -

def get_char_lists(file):
    with open(file) as f:
        return [list(line.strip()) for line in f.readlines()]

是否有办法将笔记本电脑和移动显示屏的上方div对齐？我希望内部div在同一条线上。我目前的代码是这样做的。所以我只想让整个div在页面中居中对齐。

Answer 1

您可以使用 .holder 将主要父div与中心对齐（即text-align: center）。

使用 <div> 垂直对齐孩子.content-holder到中间（即.title-holder和vertical-align: middle）。

看看下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 2

在包含的包装器上放置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 3

＆＃13;

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

＆＃13;

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

＆＃13;

Live view

您只需使用此CSS样式：

div {
  text-align:center;
}

Answer 4

您可以考虑使用display：flex

检查此代码段

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 希望它有所帮助

在中型和小型显示器中居中对齐div

4 个答案: