相关疑难解决方法(0)
如何水平居中<div>？
如何使用CSS <div>在另一个内部水平居中<div>？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
推荐指数
解决办法
查看次数
如何使用CSS垂直居中文本？
我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.
这是我的div风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>做这个的最好方式是什么？
推荐指数
解决办法
查看次数
CSS中心文本(水平和垂直)在div块内
我div有一套display:block.(90px height和width)我里面有一些文字.
我需要文本在垂直和水平方向上对齐.
我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.
有任何想法吗？
推荐指数
解决办法
查看次数
如何使用CSS轻松地水平居中<div>？
我正在尝试将一个<div>块元素水平居中在页面上并将其设置为最小宽度.最简单的方法是什么？我希望<div>元素与我的页面的其余部分内联.我将尝试绘制一个例子:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
推荐指数
解决办法
查看次数
Flexbox:水平和垂直居中
如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它们是水平居中的.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>推荐指数
解决办法
查看次数
如何水平和垂直居中元素
我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.
如何为每个标签创建文本对齐x和y？
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>推荐指数
解决办法
查看次数
水平和垂直居中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*/
}
HTML:
<div class="background">
<div …推荐指数
解决办法
查看次数
尝试在屏幕中水平和垂直居中div
我正在尝试为我的网站中心的目标网页在屏幕的中心创建一个div,但它无法正常工作.
这是我的代码
CSS:
.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}
HTML:
<div id="centerDiv" class="centerDiv">
<h1>Title</h1>
<p>Text will go here.</p>
</div>
谢谢.
推荐指数
解决办法
查看次数
我怎样才能与高度对齐
我想创建图像框(带图像).
当文本位于框顶部时,它很难看.
如何将文本与中间对齐？
我试图使用vertical-align,但似乎它不起作用
编辑:
您的解决方案适用于短消息.
但是,如果它们是多线的,它又是丑陋的.
是否有可能不增加线的尺寸如果我们不需要它？
推荐指数
解决办法
查看次数
Div水平中心和垂直中间
我想在body页面的水平中心和垂直中间对齐div .
css:
.loginBody {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
.loginDiv {
position: absolute;
left: 35%;
top: 35%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
}
我有这个HTML:
<body class="loginBody">
<form id="form1">
<div class="loginDiv">
</div>
</form>
</body>
现在它表现得像我想要的那样,但如果我调整浏览器的大小,它就会变得完全扭曲,也许这是因为绝对的定位.我正在展示一些屏幕截图:在调整大小的firefox中:
调整大小的铬:
在调整大小即: …
推荐指数
解决办法
查看次数