CODEWITHSUNDEEP
htmlcss
BwE
BwE

Reputation: 73

CSS/HTML - How can I center something when auto-margin does not seem to work?

This is part of the CSS for my menu:

ul {
    text-align: left;
    display: inline;
    margin: auto;
    width: 50%;
    position: fixed;
    top: 0;
    list-style: none;
}

I have tried auto-margin left and right. All of the methods I have tried have never resulted in the entire page being center with itself.

Here is what I have done with the main 'box' that is under the above menu.

.box {
    margin: auto;
    width: 50%;
    padding: 20px;
    background-color: #FFFFFF;
    word-break: break-all;
}

Full page source is at: https://pastebin.com/56HbfaGM

What also bothers me is that different browsers show different results.

I have not done much with HTML/CSS in years so sorry if this is super basic of a problem.

I just simply want to know some more holistic methods of centering.

Upvotes: 1

Views: 1082

Answers (5)

Armando Prieto
Armando Prieto

Reputation: 129

Instead of display: inline, you could use display: flex:

ul{
   ...
   display: flex;
   align-content: center;
   ...
}

Upvotes: 0

Karun
Karun

Reputation: 304

depends on how you need to center the item.

display: flex, with align-items:center

Simple example using flex box in HTML/CSS

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
}</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Upvotes: 0

Michael
Michael

Reputation: 1185

You can't center using margin: 0 auto if your element is position: fixed. And you can't use margin: 0 auto on an inline element.

Another problem you have is that the ul element has padding on its left side. You'll want to remove that to center things correctly.

And your final problem is even if you successfully center the ul element, it won't look centered because there'll be a portion of the element not filled with list items depending on the width of the screen since the background is transparent. You can fix that by either adding background: #A4A4A4 to give the ul element a solid background matching the li elements, or you can center the li elements by using text-align: center on the ul element.

The following is an example of centering a fixed element correctly, along with centering the list items. 

ul {
  text-align: center;
  display: inline;
  padding: 0;
  width: 50%;
  position: fixed;
  top: 0;
  left: 50%;
  margin: 0 0 0 -25%;
  list-style: none;
}

Upvotes: 1

John Mejia
John Mejia

Reputation: 59

The right way is use margin:0 auto; below I've made two ways to center a box.

HTML

<!-- Margin box -->
<div class="container">
  <div class="box-centered">

  </div>
</div>

<br>

<!-- Flexbox box -->
<div class="Aligner">
  <div class="Aligner-item"></div>
</div>

CSS

/* Margin:auto way */

.container {
  width: 100%;
}
.box-centered {
  width: 50%;
  height: 300px;
  margin: 0 auto;
  background-color: red;
}

/* Flexbox way */
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  width: 50%;
  height: 300px;
  background: blue
}

Here the example in jsfiddle: http://jsfiddle.net/1h0f74qb/

Hope this can help you.

Upvotes: 0

9RcnJXfZQTScGvUf
9RcnJXfZQTScGvUf

Reputation: 1

IIRC, you can't use auto without a defined width. Also, it's margin:0 auto;, though that might not matter with html5's lack of strictness.

Upvotes: 0

Related Questions