html怎么设置字段具体位置

求HTML5中文本或者行内块的常用居中方式 附代码 尽量全 谢了

方法一:该方法是实现单行垂直居中对齐的一种非常简单的方法。
只需确保元素的是单行并将其高度设置为“height”即可。
"如果值相同就可以,但是这个方法只能应用于单行文本元素,不能用于多行元素。
HtmlMarkupcontent
代码复制CSSCode:.vertical{height:100px;line-height:100px;/*值等于元素高度*/}复制代码好处: 适用于所有浏览器,即使空间不足,也不会被裁剪。
缺点:仅适用于文本和图像,如果文本不在一行,则此方法非常有用。
如按钮、图像和单行文本字段(绝对)。
(top:50%) 并且 margin-top 是元素高度的一半 (margin-top:-height/) 2) 使用此方法实现垂直居中 这意味着如果你在元素上设置固定高度,则设置。
'overflow:auto' 会导致元素在其超出容器时滚动,它将不再适应的高度。
HTMLMarkupcontent
复制代码 CSSCode.vertical{height:100px;/*元素高度*/position:absolute;top:50%;/*元素顶部距父元素 Off Half父元素的高度*/margin-top: -50px;/*设置元素顶部负边距。
大小是元素高度的一半*/}复制代码。
优点:适用于不同的浏览器,结构简单清晰,不需要任何浏览器。
缺点:死元素高度固定,导致空间不足。
如果超出容器大小,则会显示一条消息或显示一个滚动条(如果该元素位于主体内)。
如果用户缩小浏览器窗口,正文滚动条将不可见。
此方法主要用于垂直居中多行元素,而不是用于垂直居中该元素的。
首先需要理解并明确区分这一点。
另外,由于该方法是使用绝对定位实现的,因此在使用该方法实现元素垂直居中时应记住以下几点: 其中一个元素的定位与相对定位参考相关,因此要找出某个元素相对于哪个参考坐标,您可以另外为该元素设置一个显式的高度值,并设置该元素的顶部边距为负值。
它的值是元素高度的一半。
建议在这里设置元素的宽度值。
元素经过绝对定位后与文档流分离,其宽度根据元素占用的宽度计算,可以改善视觉效果。
最好为元素定义一个宽度值。
根据这种方法,您不仅可以将元素垂直居中,还可以将其水平居中,只需稍加修改即可: HTMLMarkuptest
复制代码 CSSCode#wrap{width:200px;/ *元素宽度*/Height:200 px;/*元素高度*/position:absolute;left: 50%;/ * 实现水平居中,使用margin-left 使用负值*/margin-left:-100px;/*值大小等于元素宽度的一半* /top:50%;/*用margin-t负值op是垂直的 这种方法可以实现水平和垂直居中。
元素,通常用于页面中心的布局。
使用此方法时,您需要了解水平和垂直居中的元素必须具有确定的大小。
(具有精确的宽度和高度值);对元素进行绝对定位并将left和top值设置为'50%'(尽管这里最好使用成对定位),如果只是水平居中则可以更改它) 最后,将 margin-top 和 margin-left 设置为负值。
它们的值分别是元素高度和宽度的一半。
方法三:方法三是用div来模拟表格效果。
即把多个
的“display”属性设置为“table”和“table-cell”并设置。
“vertical-align”的属性值为“middle”。
有关“display:table”的更多信息,请单击此处或参阅 Quirksmode 的“Thedisplaydeclaration”文章。
HTMLCodeContent
复制代码 CSSCode#container{height:300px;display:table;/*以表格格式渲染元素* /}#{显示:表-c ell;/*将元素以表格单个元素的形式渲染*/vertical-align:middle;/*使用元素的垂直对齐方式*/}复制代码优点:这个方法和前面有同样的问题两种方法,但此方法允许您根据元素的动态更改高度,因此您不会最终得到截断的元素或丑陋的滚动条。
空间不足。
缺点:这个方法只适合现代浏览器,在IE6-7上运行不佳。
而且,结构比前两者更复杂。
这种方法在现代浏览器中非常方便。
但是IE6-7不支持display:table,因此要解决IE6-7中该方法的兼容性,需要添加一个额外的div并使用下面的hack。
让我们看看解决方案。
HTMLMarkupContent
复制代码 CSSCode.table{height:300px;/*Height 值少的 */width:300px;/*宽度值不能小于这个*/display:table;position:relative;float:left;}.tableCell{display:table-cell;vertica l-align:middle;text-align:center;padding:10px;*position:absolute;*top:50%;*left:50%;}.content{*position:relative;*top:-5 0%; *left:-50%;}复制代码方法4:这个方法有点新,需要在中心元素之前有一个空的
(块元素也可以)。
然后设置这个应该是 50%,margin-bottom 应该是元素高度的一半,并且中心元素应该从浮动中清除。
如果您使用此方法,请注意,如果您将居中元素放置在 body 中,则需要在 html 和 body 上设置“height:100%”属性。
HTMLMarkupThisblockhaveemptycontent-->
Contentsection