Question

我正在使用Bootstrap制作标题。我的page-header包含图片和文字。我希望文本在标题中垂直居中。这看似简单，修复，但我遇到了麻烦。我创建了一个名为v-align的自定义类，我在其中设置vertical-alignment: middle;，但它无效。有什么建议？

图片： enter image description here

HTML：

<html>
<head>
     <!-- CSS -->
     <link rel="stylesheet" href="bootstrap.min.css">
     <link rel="stylesheet" href="style.css">  
</head>
<body>
<div class="row">
  <div class="col-sm-8 col-sm-offset-2">
    <div id="form-container">
        <div class="page-header text-center">
            <div class="row">
                <img class="col-xs-4"src="Popcorn.png"  width="100" height="auto" >
                <div class="col-xs-8 v-align">
                    <h2>Sparky's Movie Theater</h2>
                </div>
            </div>               
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</body>
</html>

Css课程：

.v-align {
    height: 100%;
    display:table-cell;
    vertical-align: middle;
}

Answer 1

通过将以下内容添加到我的css代码中，我能够将文本垂直对齐：

<强> CSS ：

#box {
height: 100px;
line-height: 100px;
text-align: center;
}
#spantext {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

HTML ：

<div class="col-xs-8" id="box">
    <h2 id="spantext">Sparky's Movie Theater</h2>
</div>

Answer 2

删除padding

中的margin和<H2>

h2{
margin:0;
padding:0;
}

HTML垂直对齐标题中的文本与图像

2 个答案: