Perfectly aligning when the width is undetermined

Question

Perfectly aligning when the width is undetermined

When centering elements with dynamic widths, I typically use the code below:

.horz-vert-center {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

However, a common issue I face is that the element resizes prematurely. For example, a menu may transition to two lines when it could still fit on one:

https://i.sstatic.net/O6WHv.png

I find this confusing - if I am using percentage values, shouldn't the margins continue to decrease?

For a demonstration, check out this link: https://codepen.io/garethj/pen/LWdaRr

html css centering

Answer 1

Answer №1

To solve the issue, you can add white-space:nowrap; to the ul and

display: inline-block; float: none;

to the li.

.horz-vert-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space:nowrap;
}
.horz-vert-center li{
  display: inline-block;
  float: none;
}

body {background:#ccc}
*{margin:0;padding:0;font-family:arial;font-size:20px}
ul {list-style-type:none}
li {float:left;margin-right:10px}
li:last-child {margin-right:0;}

<ul class="horz-vert-center">
  <li>About</li>
  <li>Work</li>
  <li>Blog</li>
  <li>Journal</li>
</ul>

Answer 2

To solve the issue, you can add white-space:nowrap; to the ul and

display: inline-block; float: none;

to the li.

.horz-vert-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space:nowrap;
}
.horz-vert-center li{
  display: inline-block;
  float: none;
}

body {background:#ccc}
*{margin:0;padding:0;font-family:arial;font-size:20px}
ul {list-style-type:none}
li {float:left;margin-right:10px}
li:last-child {margin-right:0;}

<ul class="horz-vert-center">
  <li>About</li>
  <li>Work</li>
  <li>Blog</li>
  <li>Journal</li>
</ul>

Answer 3

Answer №2

Here is a different method utilizing the snippet from "Theodore K."

Check out the demo here

.horz-vert-center {
  width:50%;
  margin: auto;
  border: 1px #000 solid;
  text-align: center;
}
.horz-vert-center li{
  display: inline-block;
  float: none;
}

*{margin:0;padding:0;}

<ul class="horz-vert-center">
  <li>About</li>
  <li>Work</li>
  <li>Blog</li>
  <li>Journal</li>
</ul>

Answer 4

Here is a different method utilizing the snippet from "Theodore K."

Check out the demo here

.horz-vert-center {
  width:50%;
  margin: auto;
  border: 1px #000 solid;
  text-align: center;
}
.horz-vert-center li{
  display: inline-block;
  float: none;
}

*{margin:0;padding:0;}

<ul class="horz-vert-center">
  <li>About</li>
  <li>Work</li>
  <li>Blog</li>
  <li>Journal</li>
</ul>

Perfectly aligning when the width is undetermined

Answer №1

Answer №2

Similar questions

Looking to showcase your logo prominently at the center of the page, flanked by two elegant

Why is there excessive whitespace appearing in Internet Explorer 9?

Incorporate a dropdown menu based on the selection made in another dropdown menu

What is the best way to align multiple container elements alongside the sidebar?

The initial item in the Materializecss slider is failing to display

Using mousedown, mousemove, and mouseup to handle touch events in vanilla JavaScript instead of jQuery

Issues arise with form submissions when attempting to implement them through jQuery

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

Unable to alter the background color of the text box

Insert more text following the existing content

Tips on maximizing the file size limit of the fileupload control in asp.net

troubleshoot clientWidth not updating when CSS changes are made

Experience mind-bending timing functions in CSS animations with IE11

What could be causing the issue preventing me from applying a border in the code below?

Deactivate the ability to hold a button, but still permit clicking in HTML for mobile

Insert a gap between the two columns to create some breathing room

Limit the use of Javascript specifically within a section of HTML that includes a rich-text editor

Can the max-height CSS media-query be utilized safely?

Customizing Material-UI elements in React using CSS styling

Help with guiding and redirecting links