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.