我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.
这是我的div风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}Run Code Online (Sandbox Code Playgroud)
<div id="box">
Lorem ipsum dolor sit
</div>Run Code Online (Sandbox Code Playgroud)
做这个的最好方式是什么?
我div有一套display:block.(90px height和width)我里面有一些文字.
我需要文本在垂直和水平方向上对齐.
我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.
有任何想法吗?
<div>在页面上垂直和水平居中元素的最佳方法是什么?
我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么?
代码:
<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>
Run Code Online (Sandbox Code Playgroud)
现在渲染时,跨度对齐div的左下角.
有没有办法垂直和水平地居中DIV,但重要的是,当窗口小于内容时,内容不会被切割 .div必须具有背景颜色和宽度和高度.
我总是将div与绝对定位和负边距居中,就像在提供的示例中一样.但它存在的问题是它会削减内容.有没有一种方法可以在没有这个问题的情况下使div .content居中?
我在这里有一个例子:http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="background">
<div …Run Code Online (Sandbox Code Playgroud) 我有一个非常基本的HTML混合纯文本和图标字体:
<div class="ui menu">
<a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
<a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
<a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>
Run Code Online (Sandbox Code Playgroud)
问题是图标没有完全呈现在与文本相同的高度:

有什么建议可以解决吗?
我正在寻找一种显示3列内容的方法.我找到了一种显示环绕列的方法,但我不希望这个页面.我正在寻找一种说法
<column>
<!-- content -->
</column>
Run Code Online (Sandbox Code Playgroud)
3次,并且彼此相邻显示3列.我手边的最好例子是The Verge(http://www.theverge.com/).做这个的最好方式是什么?
我定义了一个css类,所以我可以使用div来使用所有浏览器的视口,规则如下:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
现在我希望div中的文本位于屏幕的正中心,因此,垂直对齐中心和水平对齐中间,但我似乎无法找到正确的方法.
它只需要在基于webkit的浏览器上工作.
我已经尝试添加P元素内侧display设置为table-cell没有运气(居中文本的常用方法).
有什么建议?
有没有办法在CSS中嵌套注释?
例如,当我尝试注释掉以下两个语句时,外部注释在遇到嵌套注释中的*/时结束,而第一个语句和第二个语句的其余部分取消注释.
/*
#container {
width: 90%; /* nested comment here */
margin: 0 auto;
}
#container .class {
width: 25%;
}
*/
Run Code Online (Sandbox Code Playgroud)
当我想尝试涉及多个语句的不同样式技术时,我经常遇到这个问题.
我熟悉CSS 规范的注释及其基本原理,但也知道有一个嵌套HTML注释的解决方法,我希望有类似的CSS攻击.
有人找到了在CSS中嵌套注释的方法吗?
我正在练习CSS,我很困惑,我怎么能强迫我的div元素在我的页面中心(垂直和水平)(意味着跨浏览器兼容性的方式或方式)?
最好的祝福 !