Question

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

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

我在上面的小提琴中有一个分区，不能在中心对齐。

我已经使用float:left进行分割，以便分割宽度适合内容而不是100％宽度。

如何将分部与中心对齐？注意：分区宽度必须符合内容。

Answer 1

float: left旨在向左移动一个元素，让其后面的内容向上移动。

如果你不想那样。请勿使用float: left。

您可以使用display: table获得收缩包装效果。

Answer 2

它不会以这种方式起作用，而不是float: left，使用display: table。

JSFiddle

Answer 3

请参阅此fiddle

如果您使用margin:auto属性，

float不会使元素居中。解决此问题的一个小问题是将float:left替换为display:inline-block;

display:inline-block;会使div看起来像浮动的div。现在，要使其居中，请将元素包装在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>。

更新了HTML

.centerd_div {
  text-align: center;
}

CSS

.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>

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

Answer 4

margin: auto无法与float合作。您可以添加父级并使用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>

或者您可以让孩子display: inline-block; text-align: left;然后在父

上使用text-align: center

.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>

保证金：0自动;没有使用float居中的div：left

4 个答案:

请参阅此fiddle

段