我有一个设置为800px的div标签.当浏览器宽度大于800px时,它不应该拉伸,但它应该将它带到页面的中间.widthdiv
我div有一套display:block.(90px height和width)我里面有一些文字.
我需要文本在垂直和水平方向上对齐.
我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.
有任何想法吗？
我正在尝试将一个<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
<div>在页面上垂直和水平居中元素的最佳方法是什么？
我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么？
我想将一个<div>(或一个<table>)元素放在屏幕的中心,而不管屏幕大小.换句话说,"顶部"和"底部"上留下的空间应相等,"右"和"左"侧留下的空间应相等.我想用CSS完成这个.
我尝试了以下但它不起作用:
<body>
<div style="top:0px; border:1px solid red;">
<table border="1" align="center">
<tr height="100%">
<td height="100%" width="100%" valign="middle" align="center">
We are launching soon!
</td>
</tr>
</table>
</div>
</body>
注意:
如果<div>元素(或<table>)与网站一起滚动,则要么很好.只是希望它在页面加载时居中.
我有一个问题.我有这样的HTML代码:
<div id="main_content" >
<div id="container">
</div>
</div>
像这样的CSS:
#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
}
#container {
width: auto;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
我想#container将在#main_content中居中.但事实并非如此.我只想找出原因以及如何使其居中.
我有一个div将有这个CSS:
#some_kind_of_popup
{
position: fixed;
top: 100px;
min-height: 300px;
width: 90%;
max-width: 900px;
}
现在,我怎样才能使这个div居中？我可以使用margin-left: -450px; left: 50%;但这仅在屏幕> 900像素时才有效.之后(当窗口<900像素时),它将不再居中.
我当然可以用某种js来做这件事,但是用CSS做"更正确"吗？
可能重复:
如何水平居中div？
使用HTML中心对象的一种简单方法是使用 align='center',但它不适用于div.
我试过了:
style='text-align:center';
style='left:50%';
我甚至是真正的中心标签
<center>
但我不能让我的目标div成为中心.
我有三个元素,我试图在我的布局中对齐.
首先,我有一个div反馈,然后是搜索输入,然后是div元素的建议.
我希望第一个和最后一个元素的宽度为20%,搜索输入的宽度为60%.使用Flexbox我实现了我想要的.
但是有一个功能可以将所有div增加到最高元素.这意味着当弹出搜索结果时,反馈和建议元素的高度会随着搜索div的增加而产生混乱的布局.
有没有一个技巧不增长具有最高元素的div？只是使div(#feedback和#suggestions)具有内容的高度？
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>为什么大多数开发人员认为W3C盒式模型比Internet Explorer使用的盒式模型更好？
在Internet Explorer上开发看起来像你想要它们的页面是非常令人沮丧的,但我发现W3C盒子模型反直觉.例如,如果在宽度中考虑了边距,填充和边框,我可以为所有列分配宽度值,而不必担心列数,以及我对其填充和边距所做的任何更改.
使用W3C的盒子模型,我不得不担心我的列数,并开发类似于数学公式的东西,以便在修改边距和填充时计算正确的宽度值.改变它们的值将是困难的,特别是对于复杂的布局.考虑一下这个小框架,我写道:
#content {
margin:0 auto 30px auto;
padding:0 30px 30px 30px;
width:900px;
}
#content .column {
float:left;
margin:0 20px 20px 20px;
}
#content .first {
margin-left:0;
}
#content .last {
margin-right:0;
}
.width_1-4 {
width:195px;
}
.width_1-3 {
width:273px;
}
.width_1-2 {
width:430px;
}
.width_3-4 {
width:645px;
}
.width_1-1 {
width:900px;
}
除非有三列,因此我在此处指定的值将会失败0+20+20+20+20+0.修改填充和边距是很困难的; 我的整个宽度都必须重新计算.如果列宽包含填充和边距,我需要做的就是改变宽度,我有我的布局.我不那么批评盒子模型,更希望理解为什么它被认为更好,因为我发现很难合作.
我做错了吗？使用W3C的盒子模型似乎反直觉.一些建议将非常感激.
谢谢!