Question

我的网站上有以下标题，我希望水平和垂直居中放置文本。我在引导程序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>

Answer 1

这是您想要的吗？

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

Answer 2

在我的示例中，由于徽标的绝对位置，铭文严格居中（弯曲）。

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

Answer 3

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

如何将标题水平和垂直居中

3 个答案: