Questions tagged «vertical-alignment»

通常是与界面项在垂直平面中的位置相关联的样式或其他UI定义。

21
在图像旁边垂直对齐文字?
为什么不行vertical-align: middle?但是,vertical-align: top 确实可以。 span{ vertical-align: middle; } <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>Doesn't work.</span> </div> 运行代码段隐藏结果展开摘要

30
如何在div中垂直对齐图像
如何在容器中对齐图像div? 例 在我的例子,我需要垂直居中的<img>在<div>用class ="frame“: <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frame的高度是固定的,图像的高度是未知的。.frame如果这是唯一的解决方案,则可以添加新元素。我正在尝试在Internet Explorer 7和更高版本的WebKit,Gecko上执行此操作。 在这里查看jsfiddle 。 .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: …


30
如何在div中垂直对齐文本?
我试图找到最有效的方法来将文本与div对齐。我尝试了几件事,但似乎都没有用。 .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } <div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et …

25
如何将div的内容与底部对齐
说我有以下CSS和HTML代码: #header { height: 150px; } <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </div> 运行代码段隐藏结果展开摘要 标头部分的高度固定,但是标头内容可能会更改。 我希望标题的内容与标题部分的底部垂直对齐,因此文本的最后一行“粘贴”到标题部分的底部。 因此,如果只有一行文本,则将是: ----------------------------- | 标头标题 | | | | 标头内容(一行) ----------------------------- 如果有三行: ----------------------------- | 标头标题 | | 标头内容(是如此 | 完美的很多东西 | 跨越三行) ----------------------------- 如何在CSS中完成此操作?

28
如何在div中垂直对齐元素?
我有一个包含两个图片的div和一个h1。它们都需要在div内垂直对齐,彼此相邻。 其中一张图片需要absolute放在div中。 要在所有常见的浏览器上运行,需要什么CSS? <div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div>

10
如何在Bootstrap中将容器垂直居中?
我正在寻找一种将containerdiv 垂直居中放置jumbotron在页面中间的方法。 在.jumbotron必须适应于屏幕的整个高度和宽度。的.containerdiv有一个宽度1025px和应在该页面(垂直中心)的中间。 我希望此页面的大屏幕适应屏幕的高度和宽度,并且容器垂直于大屏幕垂直居中。我该如何实现? .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg …

8
如何将边距或填充设置为父容器的高度百分比?
我一直在绞尽脑汁使用以下命令在CSS中创建垂直对齐方式 .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } <!-- and used the following div structure. --> <div class="base"> <div class="vert-align"> Content Here </div> </div> 运行代码段隐藏结果展开摘要 尽管这似乎适用于这种情况,但令我感到惊讶的是,当我增加或减小基本div的宽度时,垂直对齐方式会对齐。我期望当我设置padding-top属性时,会将填充值作为父容器高度的百分比(在我们的示例中为基数),但是上述50%的值是按宽度。:( 有没有一种方法可以将填充和/或边距设置为高度的百分比,而无需使用JavaScript?

7
Android:多行EditText(文本区域)的垂直对齐
我想为文本区域的高度设置5行。我正在使用以下代码。 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:singleLine="false" android:lines="5" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" /> 文本区域看起来不错,但是问题在于光标在文本字段的中间闪烁。我希望它在文本字段的第一个字符的第一行闪烁。


30
将居中的文本添加到类似<hr />的行的中间
我想知道xhtml 1.0中有哪些严格选项可以在像这样的文本两边都创建一行: 第一节 -----------------------下一部分----------------------- 第二节 我曾经想过要做一些花哨的事情,例如: &lt;div style="float:left; width: 44%;"&gt;&lt;hr/&gt;&lt;/div&gt; &lt;div style="float:right; width: 44%;"&gt;&lt;hr/&gt;&lt;/div&gt; Next section 或者,因为上述方法在对齐方面存在问题(垂直和水平对齐): &lt;table&gt;&lt;tr&gt; &lt;td style="width:47%"&gt;&lt;hr/&gt;&lt;/td&gt; &lt;td style="vertical-align:middle; text-align: center"&gt;Next section&lt;/td&gt; &lt;td style="width:47%"&gt;&lt;hr/&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt; 这也有对齐问题,我可以用这个烂摊子解决: &lt;table&gt;&lt;tr&gt; &lt;td style="border-bottom: 1px solid gray; width: 47%"&gt;&amp;nbsp;&lt;/td&gt; &lt;td style="vertical-align:middle;text-align:center" rowspan="2"&gt;Next section&lt;/td&gt; &lt;td style="border-bottom: 1px solid gray; width: 47%"&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; …


9
如何在div中将高度可变的内容垂直居中?
当内容的高度可变时,垂直对齐div内容的最佳方法是什么?在我的特定情况下,容器div的高度是固定的,但是如果有一种在容器高度可变的情况下也能起作用的解决方案,那会很棒。另外,我希望不使用CSS hack和/或使用非语义标记,或者很少使用CSS hack和/或非语义标记的解决方案。

9
如何在绝对定位的父div内部垂直居中放置div
我正在尝试在粉红色的中间放置一个蓝色的容器,但是vertical-align: middle;在这种情况下似乎没有用。 &lt;div style="display: block; position: absolute; left: 50px; top: 50px;"&gt; &lt;div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"&gt; &lt;div style="background-color: lightblue;"&gt;test&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 结果: 期望: 请提出我该如何实现。 Jsfiddle

5
SVG中文本元素的垂直对齐
假设我有SVG文件: &lt;svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;text x='20' y='60' style="font-size: 60px"&gt;b&lt;/text&gt; &lt;text x='100' y='60' style="font-size: 60px"&gt;a&lt;/text&gt; &lt;/svg&gt; 我想以某种方式排列的顶部a和b。实际上,我希望我的定位符合roofline而不是baseline!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.