我有一个200 x 200像素的div.我想在div的中间放置一个50 x 50像素的图像.
怎么做到呢？
我可以通过使用text-align: centerdiv 来使它水平居中.但垂直对齐是个问题..
是否有(便携式)方法将HTML表格单元格中的文本旋转90°？
(我有一个包含许多列和大量文本的表格,所以我想垂直写它以节省空间.)
我正在尝试制作一个小的用户名和密码输入框.
我想问一下,你如何垂直对齐一个div？
我有的是:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
如何使用id用户名和表单将div垂直对齐到中心？我试图把:
vertical-align: middle;
在CSS中为id登录的div,但它似乎不起作用.任何帮助,将不胜感激.
我正在使用Twitter Bootstrap,并试图将一个按钮集中在一个表格单元格中.我只需要它垂直居中.
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
<td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
</tr>
</tbody>
</table>
请问我的JSFiddle问题.我已经尝试了几个我知道的表格中心技巧,但似乎都没有正常工作.有任何想法吗？提前致谢.
更新:是的,我已经尝试了vertical-align:middle;,如果它是内联的,那就有效,但如果它在类中,td则不行.更新了JSFiddle以反映这一点.
最后更新:我是个白痴,并没有检查它是否被bootstrap.css覆盖
如何<div>使用CSS垂直对齐包含图像(或闪光)的图像.高度和宽度是动态的.
我希望我的<p>元素位于容器的中心<div>,就像完美居中一样 - 顶部,底部,左侧和右侧边距平均分割空间.
我怎样才能做到这一点？
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>我试图垂直对齐一些不同大小的文本,但是,Firefox会在中间显示较小的文本.
CSS:
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.6em;
font-style: normal;
vertical-align: middle;
}
HTML:
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
截图: 截图http://www.doheth.co.uk/files/valign.jpg
更新:为了清楚,我知道或多或少vertical-align有效,即我已经知道常见的误解.
从更多的调查来看,解决这个问题的最简单方法似乎是将较大的文本包装在一个span并设置vertical-align在那里.然后两个孩子.categoryLinks相互对齐.除非有人能在没有额外加价的情况下表现出更好的方式
经过四年的中断后回到网络开发之后,我很难将bootstrap 3列的内容与下一列垂直对齐.我一直试着搜索这个网站以及一般的通用搜索,并且没有找到正确的解决方案...或者我的搜索条件很差.
在下面的HTML/CSS中,我想垂直居中左侧列中的"页面标题"文本.我想在使用Bootstrap 3 CSS时尽可能简洁地保持HTML和CSS的简洁,所以我想我完全错过了一些简单的东西.
HTML
<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
<div class="page-header-description"><small>Standard Text Description</small></div>
<div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
CSS
.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;vertical-align:middle;margin:10px 0; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }
这是一个jsFiddle ... http://jsfiddle.net/E6LcY/8/
这是我发布过的少数几次之一,因此指向正确的方向会很棒.
我试图垂直居中两个<p>元素.
我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.
我会尝试其他的东西,但这里的大多数问题只是回到那个教程.
此代码段用于网页顶部的横幅广告.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p> …我需要垂直和水平居中文本.有没有一种简单的方法来执行以下代码？
<div style="display: block; height: 25px;">
<span id="ctl_txt" style="background-color: rgb(255, 0, 0);">
Basic
</span>
</div>