标签: center
div内的HTML CSS div与汽车保证金偏离中心？
我有一个以页面为中心的分隔符margin:auto.在内部我有两个以上的分隔线(不能组合,必须是嵌套在分隔线中的分隔线)当我尝试将其中的内容居中时,它不会将其置于页面的中心.我假设它与我有关padding-left并且padding-right我已添加...有任何洞察力？
这是我的代码:
<center>
<div style="margin:auto; width:80%;">
<div style="width:50%; padding-left:20%; padding-right:20%;">
<div style="width:inherit; position:absolute; bottom:0%;">
<hr />
test
<hr />
<br><br><br>
</div>
</div>
</div>
</center>
推荐指数
解决办法
查看次数
选择注释时,如何仅将视图设置为垂直居中
现在,当我选择注释时,我将视图重新定位为居中,如下所示:
[mapView setCenterCoordinate:view.annotation.coordinate animated:YES];
但是,如何才能将视图重新定位到垂直而不是水平居中？
推荐指数
解决办法
查看次数
CSS:如何使周围边框的文本居中
我试图将有一条线穿过整个背景的文本居中.在文本的任一侧,有一些填充,在那里你根本看不到线.我只是一个很好的css方式来解决这个问题.这是一个显然是错误的jsfiddle,但它是一个开始:http: //jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
这里的问题是我不想指定宽度,因为我将重用这个用于不同的标题(具有不同的文本量).通过CSS进行此操作的最佳方法是什么？
更新:HEre是一种方法,但内联块具有相当糟糕的浏览器支持:http: //jsfiddle.net/gtspk/3/
推荐指数
解决办法
查看次数
中心导航栏css
我想在页面中间放置导航栏但我不知道该怎么做.这是我的代码.
CSS
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
a {
display:block;
width:80px;
background-color:#000000
}
HTML
<ul>
<li><a href="http://kevril.site40.net/">Home</a></li>
<li><a href="http://www.youtube.com/user/SuperKevril">Youtube</a></li>
</ul>
推荐指数
解决办法
查看次数
连续3个图像以容器为中心
CSS
.contain {
max-width:960px;
text-align:center;
}
.category {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.category2 {
position:relative;
display: inline-block;
pading:10px;
}
.category3 {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category2">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category3">
<img src="filigreehomebutton.png" />
</div>
我试图在容器div内对齐3个309像素宽,111像素高的图像,并且它们不对齐中心,并且第三个图像在另外两个图像下方跳跃.我试图调整容器的宽度和3个div,我已经尝试过表格并改变实际html的宽度但没有成功.
这是我第一次使用divs,我认为它们会更容易,也许我的数学在分配宽度时是关闭的,或者我只是将它构造成错误.![这里是我想要实现的一个例子,图中的三个类别.] http://i49.tinypic.com/2r2uqso.jpg
任何和所有的帮助将不胜感激.
推荐指数
解决办法
查看次数
以div为中心(绝对位置和宽度)
我使用下面的css以绝对位置居中我的div:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width: 121px;
height: 121px;
margin-top: -60.5px; /*set to a negative number 1/2 of your height*/
margin-left: -60.5px; /*set to a negative number 1/2 of your width*/
}
它就像魔法一样.但是你可以注意到,它有固定的宽度和高度.
现在我必须使用相同的CSS,但我的div没有固定的宽度和高度,因为它使用响应式布局.
我只是想知道有没有最简单的方法来通过javascript左右动态设置我的div宽度？即,它在页面加载时计算我的div宽度,并在margin-left中设置为它的负数1/2？
推荐指数
解决办法
查看次数
中心CSS按钮,宽度为auto
我想有一个按钮width:auto;和display:block;.此按钮应居中margin:0 auto.但如果我把所有人放在一起,它就行不通.
我究竟做错了什么？
码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asd</title>
</head>
<body>
I am an example content and I should be above the button. I want to have an auto width and being centered
<style type="text/css">
.btn{
color:black;
font-size: 14px;
line-height:14px;
text-align: center;
font-weight: bold;
margin:0 auto;
height:14px;
display:block;
cursor: pointer;
background-color:red;
padding:15px;
text-decoration:none;
}
</style>
<a class="btn">helloworld</a>
</body>
</html>
推荐指数
解决办法
查看次数
使用CSS进行文本的垂直和水平对齐
我试图在div框(背景颜色)内水平和垂直对齐文本,但我无法做到.
我在网上搜索过margin: auto,text-align: center并没有做好工作.
有小费吗？
检查FIDDLE.
HTML
<div id="services"><div class="holder container clearfix">
<div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
<div class="bgprice"><span class="price">10€</span></div>
</div></div>
CSS
#services .holder .bgtop{
background-color: #27ae60;
height:50px;
width:200px;
z-index: 1;
}
#services .holder .bgprice{
height:50px;
width:90px;
background-color: #272727;
z-index: 1;
}
#services .holder span.top{
color: white;
font-style: italic;
font-weight: bold;
font-size: 1.000em;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
#services .holder span.price{
color: white; …推荐指数
解决办法
查看次数
对齐图像中心,响应div的底部
<div id="banner" class="cf">
<div class="banner container">
<hr/>
<p class="banner-text">
Some text here
<span class="sub-bt">That's it.</span>
</p>
<a href="#" rel="nofollow" class="learn-btn">Learn More</a>
<img src="<?php echo get_template_directory_uri(); ?>/library/images/responsive_ex.png" class="res-ex">
</div>
</div>
到目前为止,这是该问题的代码.我需要将图像与"res-ex"类放在div类的"banner"的底部.
我尝试了多个表格单元格和位置代码,但似乎无法让它工作.
设计也很敏感.
推荐指数
解决办法
查看次数
如何在div中垂直居中图像
我有一个高度为100vh的div,因此它始终是浏览器屏幕的高度.在这个div的内部,我想放置一个图像并将其垂直于其父级.
高度是可变的,所以我不能使用固定的边距.我目前的标记如下:
HTML
<div class="textportfolio">
<h1>This is a title</h1>
<p class="textbio-small">
The Roosevelt dime is the current ten-cent piece of the United States.
</p>
<img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
</div>
CSS:
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh;
}
img.portfolio-slides-img {
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block;
}
有人知道如何根据浏览器高度垂直居中图像吗？
这是代码片段
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh
}
img.portfolio-slides-img {
margin-top: 15%;
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block; …推荐指数
解决办法
查看次数
标签 统计
center ×10
css ×9
html ×6
alignment ×2
image ×2
annotations ×1
button ×1
ios ×1
javascript ×1
margin ×1
menu ×1
mkmapview ×1
padding ×1
positioning ×1