CODEWITHSUNDEEP
htmlcss
Ernest Soo
Ernest Soo

Reputation: 194

Margin: 0 auto; not centering div with float:left

JSFiddle: https://jsfiddle.net/feyv4o4u/

<div style="border:1px solid black;position:relative;float:left;margin:0 auto" >
</div>

I have a division as presented in the fiddle above that cant be aligned in the center.

I have used float:left for the division so that the division width will fit the content as opposed to having 100% width.

How can I align a division as such to the center? Note: Division width must fit content.

Upvotes: 0

Views: 1224

Answers (4)

Lal
Lal

Reputation: 14810

See this fiddle

margin:auto wont make the element centered if you use float property. One little hack to solve this problem will be to replace float:left with display:inline-block;

display:inline-block; will make the div look like a floated div. Now, to make it centered wrap the element in a div which has a style text-align:center.

Updated HTML

<div class="centerd_div">

  <div style="border:1px solid black;position:relative;display:inline-block;margin:auto;text-align: left;" class="align-center">
    <div class="align-center" style="margin-top:2%;"><a style="font-size: 20px;color:darkgray;padding-right:33px" class="inline-block switch-workout">Workout</a><a style="color:darkgray; font-size: 20px;" class="inline-block" id="switch-calender">Calender</a></div>

    <a id="switch-border" style="font-size: 20px;color:black;border-top:1px solid black;" class="inline-block">Workout</a>
  </div>

</div>

CSS

.centerd_div {
  text-align: center;
}

Snippet

.centerd_div {
  text-align: center;
}
<div class="centerd_div">

  <div style="border:1px solid black;position:relative;display:inline-block;margin:auto;text-align: left;" class="align-center">
    <div class="align-center" style="margin-top:2%;"><a style="font-size: 20px;color:darkgray;padding-right:33px" class="inline-block switch-workout">Workout</a><a style="color:darkgray; font-size: 20px;" class="inline-block" id="switch-calender">Calender</a></div>

    <a id="switch-border" style="font-size: 20px;color:black;border-top:1px solid black;" class="inline-block">Workout</a>
  </div>

</div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

margin: auto deosn't work with float. You can add a parent and use display: flex; justify-content: center;

.parent {
  display: flex;
  justify-content: center;
}
<div class="parent">
  <div style="border:1px solid black;position:relative;" class="align-center">
    <div class="align-center" style="margin-top:2%;"><a style="font-size: 20px;color:darkgray;padding-right:33px" class="inline-block switch-workout">Workout</a><a style="color:darkgray; font-size: 20px;" class="inline-block" id="switch-calender">Calender</a></div>

    <a id="switch-border" style="font-size: 20px;color:black;border-top:1px solid black" class="inline-block">Workout</a>
  </div>
</div>

Or you can make the child display: inline-block; text-align: left; then use text-align: center on the parent

.parent {
  text-align: center;
}
<div class="parent">
  <div style="border:1px solid black;position:relative;display: inline-block;text-align: left;" class="align-center">
    <div class="align-center" style="margin-top:2%;"><a style="font-size: 20px;color:darkgray;padding-right:33px" class="inline-block switch-workout">Workout</a><a style="color:darkgray; font-size: 20px;" class="inline-block" id="switch-calender">Calender</a></div>

    <a id="switch-border" style="font-size: 20px;color:black;border-top:1px solid black" class="inline-block">Workout</a>
  </div>
</div>

Upvotes: 0

LXhelili
LXhelili

Reputation: 980

It will not work in this way, istead of float: left, use display: table.

JSFiddle

Upvotes: 2

Quentin
Quentin

Reputation: 943556

float: left is designed to move an element to the left and let the content that follows it move up beside it.

If you don't want that. Don't use float: left.

You can get a shrink-wrapping effect with display: table.

Upvotes: 2

Related Questions