How can I make an element center horizontally?

Question

I have the following HTML structure:

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  margin: 0 auto;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

I need to center a.child2 . I can do this by adding text-align: center to div.parent. But in that case, a.child1 will be centered too and I don't want to.

As you can see, I've also added margin: 0 auto; to a.child2, but it is still placed on the left side.

To sum up, how can I center a.child2 while mantaining a.child1 on the left side?

score 3 · Answer 1 · answered Sep 16 '16 at 14:38

Set display property as block show them in different line. And then apply text-align property to the .child2 to align text in center.

.parent {
  border: 1px solid;
  width: 60%;
}
.parent a {
  display: block;
}
.child2 {
  text-align: center;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <a href="#" class="child2">this should be center</a>
</div>

dippas · Answer 2 · 2016-09-16T14:42:04.970

3

set .child2 to display:table

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  margin:auto;
  display:table
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

edited Sep 16 '16 at 14:42

answered Sep 16 '16 at 14:39

dippas

58,591
15
114
126

score 1 · Answer 3 · answered Sep 16 '16 at 14:40

You can center using display: table and margin: 0 auto which is already in place.

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  display: table;
  margin: 0 auto;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

score 1 · Answer 4 · answered Sep 16 '16 at 14:41

If you don't mind, you can make child2 display inline-block and width 100%, then you can center its content.

.parent{
  border: 1px solid;
  width: 60%;

}

.child2{
 width:100%;
 text-align:center;
 display: inline-block;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

score 1 · Answer 5 · answered Sep 16 '16 at 14:45

For the margin: 0 auto to work there are few things you need to keep in mind.

The element must display: block
The element must not float
The element must not have a fixed or absolute position
The element must have a width that is not auto.

So in your case only 2 things were missing - width & display: block(since <a> is by default display:inline-block). This should fix

.child2{
  margin: 0 auto;
  width:40%;
  display: block;
}

score 0 · Answer 6 · answered Sep 16 '16 at 14:40

0

Put those lines in p tags and assign text-align: center to the second one:

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  text-align: center;
}

<div class="parent">
<p class="child1">
  <a href="#" >it should stay in the left side</a>
  </p>
<p class="child2">
  <a href="#">this should be center</a>
</p>
</div>

answered Sep 16 '16 at 14:40

Johannes

64,305
18
73
130

If you have access to the html, this approach would be my preferred one. But I would replace the `p` by `li` and make `div.parent` a `ul`. – connexo Sep 16 '16 at 14:43
if it's a navigation menu, yes – Johannes Sep 16 '16 at 14:46
I don't see what this would have to do with it being a navigation element or not. Unordered lists are the right elements to use when you have a list of items that have a common semantic origin. – connexo Sep 16 '16 at 17:14
exactly - which a nagivation menu is good example for... – Johannes Sep 16 '16 at 20:42

How can I make an element center horizontally?

6 Answers6