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

如何在div内部垂直居中?

文自怡
2023-03-14
问题内容

编码:

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

如现在所呈现的,跨度与div的左下角对齐。


问题答案:

请参阅我关于理解垂直对齐的文章。在讨论的最后,有多种技术可以实现您想要的。

(超简短摘要:或者将子级的行高设置为等于容器的高度,或者将子级的高度设置为在容器上并将子级绝对定位为,top:50%其中margin-top:-YYYpxYYY为子级已知高度的一半。)



 类似资料:
  • 问题内容: 我正在尝试制作一个小的用户名和密码输入框。 我想问一下,如何垂直对齐div? 我所拥有的是: 如何使ID为Username和Form的div垂直对齐中心?我试着把: 在CSS中用于ID为Login的div,但似乎不起作用。任何帮助,将不胜感激。 问题答案: 现代浏览器中最好的方法是使用flexbox: 某些浏览器将需要供应商前缀。对于不支持Flexbox的较旧的浏览器(例如IE9及更低

  • 问题内容: 我有这样的标记: div高于img: 我需要将图像放置在div的中间(在其上下具有相同的空白)。 我试过了,它不起作用: 问题答案: 如果您的图像纯粹是装饰性的,那么将其用作背景图像可能是一种更语义化的解决方案。然后您可以指定背景的位置 如果它不是装饰性的并且构成有价值的信息,则img标签是合理的。在这种情况下,您需要使用以下属性设置包含div的样式:

  • 本文向大家介绍如何垂直居中` `?相关面试题,主要包含被问及如何垂直居中` `?时的应答技巧和注意事项,需要的朋友参考一下 使用协助元素(这里是i),作为img的相邻元素,同为inline-block的两元素相邻时增加vertical-align: middle

  • 问题内容: 是否可以将 div 垂直居中于%height div中 ? 问题答案: 在这里以及整个Internet上,已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何,我这样做的首选方式是使用和。

  • 问题内容: 当内容的高度可变时,垂直对齐div内容的最佳方法是什么?在我的特定情况下,容器div的高度是固定的,但是如果有一种解决方案在容器具有可变高度的情况下也能解决问题,那将是很好的。另外,我希望不使用CSS hack和/或使用非语义标记,或者很少使用CSS hack和/或非语义标记的解决方案。 问题答案: 只需添加 到内部div 它的作用是将内部div的顶部边框移到外部div的一半高度(),