Question

我想修复我的标题div，它有两个组件。图像和页面标题如图所示：

下面显示的图像位于MDPI屏幕上。

这是我的代码

#headerdiv {
  font-size: 4em;
  font-weight: bold;
  line-height: 60px;
  padding: 1% 0;
  margin: auto auto;
}

.headerdiv>#leftheaderdiv {
  min-height: 750px;
  text-align: center;
}

<div class="headerdiv">
  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv">
    <img src="http://lorempixel.com/200/200/sports" id="mainlogo" />
  </div>
  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv">
    <p id="headerdivp">TXYZ RD MEDIA</p>
  </div>
</div>

在移动屏幕上看起来像这样，根据自举安排很好：

我面临的问题是在HDPI屏幕上，标题如下所示。该文字位于顶部。：

如何确保正确的div也占据100％的高度/填充正确的部分，无论屏幕大小如何，文本总是在中间？

谢谢！

Answer 1

解决方案1：

您可以使用flex将文字对齐在垂直中心。在段落父元素中添加以下CSS，如下所示。

.headerdiv > #leftheaderdiv{
  min-height: 750px; 
  display: flex;
  align-items: center;
  text-align: center;
 }

解决方案2：

如果您不想使用flex，可以使用旧方法，例如将您的父级设为table，将子元素设为table-cell。

 #headerdivp{
    font-size: 4em; 
    font-weight: bold;
    line-height: 60px; 
    padding: 1% 0; 
    display:table-cell;
    vertical-align:middle;
    margin: auto auto;
  }

 .headerdiv > #leftheaderdiv{
    min-height: 750px; 
    display:table;    
    text-align: center;
 }

Answer 2

尝试使用 flex ..

对于垂直对齐中心，请使用sleep 1。

对于移动堆叠视图，请使用媒体查询使用align-items:center。

Stack Snippet

＆＃13;

flex-direction:column

＆＃13;

#headerdivp {
  font-size: 4em;
  font-weight: bold;
  line-height: 60px;
}

.headerdiv>#leftheaderdiv {
  text-align: center;
}

.headerdiv {
  display: flex;
  align-items: center;
}

@media (max-width:768px) {
  .headerdiv {
    flex-direction: column;
  }
}

＆＃13;

参考链接

Answer 3

您缺少row课程。还要添加课程align-items-center。也有两次id leftheaderdiv。让它独一无二。

<div class = "row headerdiv align-items-center">               
            <div class = "col-lg-6 col-md-12 col-sm-12 col-xs-12" id = "leftheaderdiv">
                <img src="https://s3-us-west-1.amazonaws.com/xesdcf/xdclogo3d2.svg" id = "mainlogo"/>
            </div>
            <div class = "col-lg-6 col-md-12 col-sm-12 col-xs-12" id = "leftheaderdiv">
                <p id = "headerdivp">TXYZ RD MEDIA</p>              
            </div>
</div>

Web：如何将所有屏幕尺寸的右侧居中

3 个答案: