当前位置: 首页 > 面试题库 >

如何水平对齐div?

林玮
2023-03-14
问题内容

由于某些原因,我的div不会在包含div的水平居中:

.row {

  width: 100%;

  margin: 0 auto;

}

.block {

  width: 100px;

  float: left;

}


<div class="row">

  <div class="block">Lorem</div>

  <div class="block">Ipsum</div>

  <div class="block">Dolor</div>

</div>

有时有一个行div,其中只有一个块div。我究竟做错了什么?


问题答案:

要实现您想要做的事情:

考虑使用display: inline- block代替float



 类似资料:
  • 问题内容: 我需要将两个div彼此对齐,以便每个都包含一个标题和一个项目列表,类似于: 使用表非常容易,但是我不想使用表。我该如何实现? 问题答案: 将div浮动到父容器中,并设置其样式如下:

  • text-align-last属性用于定义块级容器中,行内元素的最后一行内容的水平对齐方式,可选值有 auto | left | center | right | justify | start | end | start | end,默认值为 auto。 除 auto外,其它取值与 text-align 属性取值的含义相同。auto 表示使用 text-align 的设定(例外情况,text-a

  • 在一个块级容器中,当一行中的行内级框的总宽度,小于容器的宽度时,通过 text-align属性来指定这些行内级框在行中的水平分布。 事实上,text-align属性是通过指定行框与哪个点对齐,来决定行内级框在行中如何进行水平分布。可选值有 left | center | right | justify | start | end,默认值为start。不同取值的含义见表 3‑3: 表 3-3 tex

  • 问题内容: 我唯一的问题是使它们三排成一直线并具有相等的间距。显然,跨度不能具有宽度,并且div(以及具有display:block的跨度)不能水平并排出现。有什么建议吗? 是我现在所拥有的。 问题答案: 您可以将divs与该属性一起使用,该属性将使它们彼此水平并排显示,但是随后您可能需要对以下元素使用清除功能,以确保它们不重叠。

  • 问题内容: 我需要居中对齐水平菜单。 我尝试了各种解决方案,包括/ / 等等的组合,但是没有成功。 这是我的代码: 更新 我知道如何中心对齐的内部。可以使用Sarfraz的建议来完成。但是列表项仍然浮动在内。 我需要Java语言来完成此操作吗? 问题答案: 前提很简单,基本上只涉及一个无宽度的浮动包装,该浮动包装浮动到左侧,然后从屏幕上移到左侧的宽度位置。左:-50%。接下来,将嵌套的内部元素反转

  • 问题内容: 我有一个容器div,其中有一个固定的,并带有。 我想要水平行的float:此容器内的div左。左浮动的Divs在读取其父级的右边界后自然会推到下面的“行”上。即使父级的不允许这样做,也会发生这种情况。这是这样的样子: ![错误] [1]- 删除了已被广告替换的图片棚屋图片 我希望它看起来如何: ![右] [2]- 删除了已被广告替换的图片棚屋图片 注意:我想要的效果可以通过使用内联元素