Tips for perfectly aligning heading both horizontally and vertically

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>

htmlcssbootstrap-4

Answer №1

Is this the desired outcome?

.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

My demonstration showcases a flawlessly centered inscription (using flex) thanks to the logo's absolute positioning.

.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

To utilize the power of display: flex, make sure to also incorporate justify-content and align-items in your CSS like demonstrated in the example 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>Service for Studies and Research</strong>
        </h1> 
        <div class="clr"></div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Responsive design for Galaxy S7 devices is optimized through the use of media

I am encountering an issue with media queries on two different websites hosted on the same server, both being accessed using a Galaxy S7 device. @media only screen and (min-width:501px) and (max-width: 999px) { } @media only screen and (max-width: 500p ...

htmlcssmedia

Use JavaScript to overlay drawings onto an existing image

Within this particular image, I possess a compilation of pixel coordinates outlining the polygon segments that encompass all the objects contained within it (refer to the image provided below). For example, in relation to the individual, there exists a li ...

javascriptjqueryhtmlimagecanvas

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

javascripthtmlangulartypescript

Browsing through different backdrop visuals

I realize this question has been brought up numerous times before, but I urge you to take a moment and read through it. Currently, I am looking to add more interactivity to my HTML page. My goal is to change the background image every five seconds with a ...

javascriptjqueryhtmlcss

Problem with traversing from parent to children elements using jQuery selectors

<form data-v-c4600f50="" novalidate="novalidate" class="v-form"> <div data-v-c4600f50="" class="pr-2" question="Top Secret4"> <div data-v-c4600f50="" f ...

javascripthtmljquerycss

An issue has been detected where the bullet list is uneven due to the CSS property/value columns being set

Is there a more effective way to split a bulleted list into two columns than the method I am currently using and ensure that the columns are aligned at the top? .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ...

htmlwordpresscsscss-multicolumn-layout

Incorporate text inside the border of a Material UI chip

https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...

cssreactjsmaterial-ui

The text box and buttons are not properly aligned

https://i.stack.imgur.com/lxeKw.png I am puzzled by the misalignment of my buttons and text box. <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label> <div class="col ...

htmlcssbootstrap-4

Hide the border on a table with CSS

I recently installed a Wordpress Template and customized the table's background and text colors. However, I am struggling to remove the border around the table. Despite searching for solutions, my limited CSS knowledge has not led me to a fix that wor ...

htmlcsswordpress

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

javascripthtmlangularangular2-formsangular4-forms

The CSS top border is failing to display

For a school project, I've been attempting to add a top border to a set of hyperlinks in order to separate them from the title. However, after spending over an hour on this task, I still can't seem to get it to work. Below is the CSS code for th ...

htmlcssborder

Enhance the input by incorporating more fields without altering the existing content

Currently, I am working on creating an input form that includes multiple fields and has the capability to generate a preview of the entered content in a separate div. One key feature I would like to implement is allowing users to add additional fields as n ...

javascripthtmlformstextarea

Creating a navigation bar in React using react-scroll

Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...

htmlcssreactjs

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss

ng-class in Angular seems to be functioning properly on <td> elements, but is not

When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...

htmlcssangularjshtml-table

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

htmlcsssvg

Unable to render HTML in Simple Product Name on Magento platform

Is there a way to include HTML in my basic product titles, such as: <strong>A.</strong> Product Title Name However, the frontend displays these HTML tags. Is there a method to enable parsing of all HTML tags? ...

phphtmlmagento

Vue.js - Trouble with Rendering Elements

I'm facing an issue with displaying data fetched from an API using axios in Vue.js. Despite writing the code, the elements are not being rendered and don't appear in the elements console. See below for the code snippets: <div class=" ...

htmlvue.js

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss