如何解决如何将标题水平和垂直居中
我的网站上有以下标题,我希望水平和垂直居中放置文本。 我在引导程序4中使用的是“文本中心”类。它可以工作,但是,它在徽标后的空格处居中。我希望文本相对于标题整体居中。以下是标头的HTML和CSS代码。
.header {
width: 100%;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
background-color: #5186a7;
overflow: hidden;
}
.logo {
display: block;
float: right;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
}
<div class="header-sec">
<div class="header">
<a href="visitor_home.php">
<img src="images/header_logo.png" alt="Logo" class="logo">
</a>
<h1 class="text-center"style="color:white;"><strong>خــدمـــة الــدراســات والأبــحــاث</strong></h1>
<div class="clr"></div>
</div>
解决方法
这是您想要的吗?
.header {
height: 100px;
background-color: #5186a7;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.logo {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2rem;
width: 213px;
height:82px
}
<div class="header-sec">
<div class="header">
<a href="visitor_home.php">
<img src="images/header_logo.png" alt="Logo" class="logo">
</a>
<h1 class="text-center"style="color:white;"><strong>خــدمـــة الــدراســات والأبــحــاث</strong></h1>
<div class="clr"></div>
</div>
,
在我的示例中,由于徽标的绝对位置,铭文严格居中(弯曲)。
.header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
background-color: #5186a7;
overflow: hidden;
}
.logo {
position: absolute;
right: 0;
top: 0;
display: block;
float: right;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
}
<div class="header-sec">
<div class="header">
<a href="visitor_home.php">
<img src="images/header_logo.png" alt="Logo" class="logo">
</a>
<h1 class="text-center"style="color:white;"><strong>خــدمـــة الــدراســات والأبــحــاث</strong></h1>
<div class="clr"></div>
</div>
,
将display: flex
属性与justify-content
和align-items
一起使用,如下所示:
.header {
width: 100%;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
background-color: #5186a7;
overflow: hidden;
}
.logo {
display: block;
float: right;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
}
.text-center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="header-sec">
<div class="header">
<h1 class="text-center"style="color:white;">
<strong>خــدمـــة الــدراســات والأبــحــاث</strong>
</h1>
<div class="clr"></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。