CODEWITHSUNDEEP
jqueryhtmlcss
Xeen
Xeen

Reputation: 7003

How to center align divs (the same way as text-align: center)?

I need to align number of links to the center of the parent div, but since those links have a wrapper, and the wrapper has float: left, I can't use text-align: center. Are there any other alternatives?

The markup looks like so:

<section class="parent">
  <article class="linkWrapper"><a href=".."></a></article>
  <article class="linkWrapper"><a href=".."></a></article>
  <article class="linkWrapper"><a href=".."></a></article>
</section>

There are reasons as to why I need the wrapper for the link so removing it is not an option. Any help appriciated.

Thanks!

Upvotes: 2

Views: 55

Answers (3)

H&#233;ctor Le&#243;n
H&#233;ctor Le&#243;n

Reputation: 2400

for your markup i centered like this

.parent {
  background-color: cyan;    /* Just for better understanding */
  text-align: center;
}

.parent .linkWrapper {
  background-color: red;    /* Just for better understanding */
  display: inline-block;
  padding: 5px 10px;
}

Check the link http://codepen.io/TibicenasDesign/pen/yNpLaj?editors=110

Upvotes: 0

Lord Nodral III
Lord Nodral III

Reputation: 81

This makes no sense. How can you float the wrapper left, and yet want to center the link?

I can only assume you are wanting an equally spaced 3 column layout??

if this is the case, make the width of each wrapper 33%, then put text-align:center on the wrapper too. this will centralize the link within the wrapper, and all 3 will be spread eqaully accross the outer section.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You can use margin: auto; trick.

.parent{
   margin: 0 auto;
   width: 500px;/*define width for your wrapper*/
}

Upvotes: 3

Related Questions