我有问题在父div中居中图标(垂直和水平).我的divs页面上有很多不同大小的父级,所以我希望能够按比例将图标放在每个父级div的中心.这是问题的JSFiddle:
HTML
<div class="img_container">
<i class="icon-play-circle"></i>
</div>
<br>
<div class="img_container2">
<i class="icon-play-circle"></i>
</div>
CSS
.img_container{
width:100px;
height:100px;
position:relative;
background:red;
}
.img_container2{
width:100px;
height:50px;
position:relative;
background:blue;
}
.icon-play-circle{
position:absolute;
top:45%;
left:45%;
color: white;
}
嗨我想放置一个垂直和水平居中对齐的图像,我的HTML标记是
<ul class="big-wrapper">
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
<img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</div>
</li>
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
<img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</li>
</ul>
Used Css
ul.big-wrapper li > div {
height:612px;
width:612px;
}
ul.big-wrappe li {
float:left;
margin:0 20px 20px 0;
position:relative;
text-align:center;
}
做完所有这些事后我无法做到.请看看并帮助我.
我正在创建一个新网站,我需要知道一些事情(将以示例显示).
让我说我这样做:
HTML;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
和css:
#center-in-bar {
list-style:none;
display:inline-block;
/*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}
如何使所有li元素在水平和垂直方向都居中？在中心杆元素？
任何帮助将是appriciated :))
<div class="container">
<span>Some text, yay</span>
</div>
<div class="container">
<span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>
</div>
<style>
.container {
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
.container span {
padding-left: 30px;
}
</style>
这个解决方案效果很好,直到屏幕宽度太小 - 将我的文本分成几行.
当我谷歌问题时,我发现了许多疯狂的过于复杂的解决方案,使用javascript和div来推送我的内容.任何人都可以帮助我在没有添加更多标记的情况下完成这项工作吗？:)
无需支持Internet Explorer和旧版浏览器.
谢谢
我需要一些CSS帮助,我有一个用于加载页面的微调器,完全居中,它是垂直居中,但现在我怎样才能将所有可能的屏幕宽度居中？
这是我的标记:
<!DOCTYPE html>
<html>
...
<body>
<div class="loading">
<div class="loader"></div>
</div>
...
</body>
</html>
这是我的样式表:
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
background: #fff;
}
.loader {
font-size: 10px;
border-top: .8em solid rgba(218, 219, 223, 1);
border-right: .8em solid rgba(218, 219, 223, 1);
border-bottom: .8em solid rgba(218, 219, 223, 1);
border-left: .8em solid rgba(58, 166, 165, 1);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,
.loader:after …我为客户端制作了一个用于图像拼接的悬停信息框.当这个人盘旋图像时(不同的方向,所以它的灵活大小),他会在另一个div上方获得一些信息.灵活性是问题:我希望div垂直和水平的内容居中.目前它看起来像这样:
.linkbox {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
color: #fff;
font-size: 1.9em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
但我希望这些东西出现在盒子的中间.所以我的第一个想法是:padding-top:40%;和(或许!？)50%的高度,其余的信息.我知道我必须以%表示这个大小,但那只是粗略的.你有什么主意吗？
我试图找到如何垂直居中,但我找不到满意的答案.我发现的最佳答案是这个.这使它看起来像是允许我垂直居中文本,但如果我使用它并添加更多文本,它只会扩展到底部而不是重新居中,就像水平发生的那样.
注意,我正在寻找一个仅限CSS的解决方案,所以请不要使用JavaScript.注意,我希望能够添加多行文本.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
text-align: center;
display: table;
}
div#maindiv span {
font-size: 1.1em;
}
div#part1 {
width: 270px;
height: 99px;
background-color: #6DCAF2;
float: left;
vertical-align: middle;
position: relative;
}
div#horizon1 {
background-color: green;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%; …我得到了一个大小未知的元素,其中position = absolute,top = 1000,left = 1000.
现在,该元素的左上角位于(1000,1000),但我希望元素的中心为(1000,1000).
有没有办法单独使用CSS？
当我使用top:50%并且离开:50%
盒子不是直接在中心.当然,当盒子非常小时,它似乎是居中的.但是当盒子有点大时,它看起来好像没有居中.
我怎么解决这个问题？
我正在使用bootstrap并创建一个面板.我正试图将我的面板放在屏幕中间.它在一个容器内.
<div class="container body-content">
<div class="panel panel-default col-md-6">
<div class="panel-title text-center">Log in</div>
<div class="panel-body text-center">
<h6>Use a local account to log in.</h6>
</div>
</div>
</div>