Center two elements within a div container both horizontally and vertically

Question

Center two elements within a div container both horizontally and vertically

I am trying to vertically center a text and a button within a container. The text should be positioned in the middle of the div, while the button should be aligned to the right.

What is the best way to achieve this layout where the text element is centered and the button is on the right side?

My current code looks like this:

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  top: 50%;
  left: 50%;
}

#menuBtn {
  right: 20%;
}

  <div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

html css

Answer 1

Answer №1

To center the text in the header of a button with average size, you can utilize the flex model and apply some left padding. This will ensure that the text is positioned neatly in the middle.

For example, you can include a gradient effect to visually display the center alignment.

* {
  margin: 0;
}

body {
  color: #ffffff;
  background: #4a4a4a;
}

#header {
  height: 60px;
  background: linear-gradient(to right, transparent 50%, rgba(0,0,0,0.25) 50%),
             linear-gradient(to top, transparent 50%, rgba(0,0,0,0.25) 50%) #313132;
  display: flex;
  align-items: center;
  padding-left: 2.75em; /* adjust this value based on the width and potential right margin of the button for proper alignment */
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  margin: auto; /* centers the element */
}

#menuBtn {
  margin-right: 0; /* pulls the button to the right */
}

<div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

Answer 2

To center the text in the header of a button with average size, you can utilize the flex model and apply some left padding. This will ensure that the text is positioned neatly in the middle.

For example, you can include a gradient effect to visually display the center alignment.

* {
  margin: 0;
}

body {
  color: #ffffff;
  background: #4a4a4a;
}

#header {
  height: 60px;
  background: linear-gradient(to right, transparent 50%, rgba(0,0,0,0.25) 50%),
             linear-gradient(to top, transparent 50%, rgba(0,0,0,0.25) 50%) #313132;
  display: flex;
  align-items: center;
  padding-left: 2.75em; /* adjust this value based on the width and potential right margin of the button for proper alignment */
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  margin: auto; /* centers the element */
}

#menuBtn {
  margin-right: 0; /* pulls the button to the right */
}

<div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

Answer 3

Answer №2

Start by centering h1 by setting the line-height to match the height of the header, and using text-align:center

Next, for centering the menu:

#menuBtn {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

Here, top:50% moves the menu down by 50% of the header's height, and then transform:translateY(-50%); moves the menu up by 50% of its own height, effectively centering it vertically within the header

Refer to the code snippet below:

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
position:relative;

}

#headerTitle {
  font-weight: bold;
  text-align:center;
  font-size: 30px;
line-height:60px;


}

#menuBtn {
  position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
}

<div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

Answer 4

Start by centering h1 by setting the line-height to match the height of the header, and using text-align:center

Next, for centering the menu:

#menuBtn {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

Here, top:50% moves the menu down by 50% of the header's height, and then transform:translateY(-50%); moves the menu up by 50% of its own height, effectively centering it vertically within the header

Refer to the code snippet below:

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
position:relative;

}

#headerTitle {
  font-weight: bold;
  text-align:center;
  font-size: 30px;
line-height:60px;


}

#menuBtn {
  position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
}

<div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

Answer 5

Answer №3

To easily incorporate a button into your text, simply place it within the <p> tags.

<p id="headerTitle">Title<button id="menuBtn">Menu</button></p>

If you'd like to create some space between the text and the adjacent button, you can achieve this by adding margin properties to the button:

#menuBtn {
  right: 20%;
  margin-left: 20px;
}

Answer 6

To easily incorporate a button into your text, simply place it within the <p> tags.

<p id="headerTitle">Title<button id="menuBtn">Menu</button></p>

If you'd like to create some space between the text and the adjacent button, you can achieve this by adding margin properties to the button:

#menuBtn {
  right: 20%;
  margin-left: 20px;
}

Answer 7

Answer №4

Place them within the same container inside another container
Avoid specifying the width and height of the inner container
Ensure that the inner container has text-align = "center"
Adjust the padding of the outer container to your liking

This is how your layout will appear:

outerWrap{
innerWrap{

  <p> , <h1>   

           }   
      }

Answer 8

Place them within the same container inside another container
Avoid specifying the width and height of the inner container
Ensure that the inner container has text-align = "center"
Adjust the padding of the outer container to your liking

This is how your layout will appear:

outerWrap{
innerWrap{

  <p> , <h1>   

           }   
      }

Answer 9

Answer №5

It is always recommended to do some research and try to resolve the issue on your own before seeking help. There are numerous resources available online that can assist with this type of question, so a quick Google search should provide some guidance.

For those looking for information on vertical alignment, check out this resource.

In response to your query and based on the details you have shared, the following code snippet may be helpful:

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}

#menuBtn {
  display: block;
  margin: 0 auto;
}


/* --- */

.float {
  height: 75px;
  width: 50%;
  display: block;
  float: left;
  background: #f0f;
}

.align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div id="header">
  <div class="float">
    <p id="headerTitle" class="align">Title</p>
  </div>
  <div class="float">
    <button id="menuBtn" class="align">Menu</button>
  </div>
</div>

Best regards,

-B

Answer 10

It is always recommended to do some research and try to resolve the issue on your own before seeking help. There are numerous resources available online that can assist with this type of question, so a quick Google search should provide some guidance.

For those looking for information on vertical alignment, check out this resource.

In response to your query and based on the details you have shared, the following code snippet may be helpful:

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}

#menuBtn {
  display: block;
  margin: 0 auto;
}


/* --- */

.float {
  height: 75px;
  width: 50%;
  display: block;
  float: left;
  background: #f0f;
}

.align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div id="header">
  <div class="float">
    <p id="headerTitle" class="align">Title</p>
  </div>
  <div class="float">
    <button id="menuBtn" class="align">Menu</button>
  </div>
</div>

Best regards,

-B

Center two elements within a div container both horizontally and vertically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Effortlessly retrieving the id attribute from an HTML tag using jQuery

CSS: Aligning content vertically centered

bridging information from tables with text fields in forms

How to enable drag-and-drop functionality for an iframe?

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Tips for positioning the title of a card in Bootstrap-Vue

What are some effective ways to stretch specific muscles?

Angular: seamlessly transferring all directives from parent component to child without interference

Issue with jQuery centering in IE browsers with jquery-ui-1.10.3.custom.js and jquery-ui-1.9.2.custom.js not working as expected

Retrieving input values from different input types within a div using jquery

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

Tips for keeping a consistently viewable and editable iteration of your HTML form

The issue with the stretched-link in Bootstrap 5 is that it is not functioning properly when used with a

Retrieve the index value within a given range

HTML5 canvas game issue: background fails to load

Guide to ensuring the navbar remains at the top of the webpage following an image

Sharing a document that contains a linked image file using a relative path through the `publish` feature

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

Slicknav is failing to appear on the screen, although it is being