https://i.sstatic.net/8ttSh.png https://i.sstatic.net/vSsH5.png
My website has a header with text that I want to center both horizontally and vertically. I am currently using the 'text-center' class in Bootstrap 4, which centers the text but only within the space after the logo. I need the text to be centered relative to the entire header. Below 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>