1

header logo

I have the following header in my website, I want to center the text both horizontally and vertically. I am using class 'text-center' in bootstrap 4. It works, however, it centers it in the space after the logo. I want the text to to be centered relative to the header as a whole. The following is the HTML and css code for the header.

.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>
Khuzama
  • 41
  • 6
  • You can easily accomplish this if you make the logo a background image. – Dan Mullin Aug 11 '20 at 19:29
  • @DanMullin The logo is an anchor tag because I need to be able to click it to take me to the home page, so I can't make it a background image. – Khuzama Aug 11 '20 at 19:43

3 Answers3

1

Is this what you wanted ?

.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>
mttetc
  • 711
  • 5
  • 12
0

In my example, the inscription is strictly centered (flex) due to the absolute positioning of the logo.

.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>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
  • It works, however, now the header became smaller and only half of the logo shows – Khuzama Aug 11 '20 at 19:53
  • I can figure out the size, but I don't know what size the logo itself is. Where can I see it and apply it in my answer? I can redo my decision. ... and the logo should also be in the center of the vertical? – s.kuznetsov Aug 11 '20 at 19:56
  • I edited the question and attached the logo. It's right beneath the first picture, it's all white though, so it might not be visible. The size of the logo: Width: 213px , Height: 82px. Yes the logo should also be vertically centered. – Khuzama Aug 11 '20 at 20:01
-1

Use display: flex property along with justify-content and align-items like the snippet below:

.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>
keidakida
  • 713
  • 4
  • 12