我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
<body>
<div>Div to be aligned vertically</div>
</body>
Run Code Online (Sandbox Code Playgroud)
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中?
我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.
其中一个图像需要absolute放在div中.
在所有常见浏览器上工作所需的CSS是什么?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Run Code Online (Sandbox Code Playgroud) 我想将一个div添加到另一个div中.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我目前使用的CSS.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Run Code Online (Sandbox Code Playgroud)
正如你所看到的,我现在使用的方法取决于宽度和高度的值innerDiv.如果宽度/高度发生变化,我将不得不修改margin-top和值.margin-left是否有任何通用的解决方案,我可以用它来居中,innerDiv无论是什么它的大小?
我发现使用margin:auto可以将innerDiv水平对齐到中间.但是垂直中间的那个呢?
我正在尝试格式化我的查询浮图饼图标签和图例。
这是我迄今为止创建的内容:

这就是我正在尝试创建的(我使用 photoshop 完成的):

如您所见,我正在努力在饼图中包含百分比和值(看到百分比是粗体而值不是),并垂直居中对齐图例。
这是代码:
(function () {
var data = [
{ label: "Sales & Marketing", data: 9545, color: "#62A83B"},
{ label: "Research & Development", data: 16410, color: "#2897CB"},
{ label: "General & Administration", data: 4670, color: "#DEAB34"}
];
$(document).ready(function () {
$.plot($("#expenses-chart"), data, {
series: {
pie: {
show: true
}
},
legend: {
show: true,
labelFormatter: function(label, series) {
var percent= Math.round(series.percent);
var number= series.data[0][1]; //kinda weird, but this is what it takes
return(' <b>'+label+'</b>: '+ percent …Run Code Online (Sandbox Code Playgroud) 我在一个<ul>元素中添加了一个搜索框作为列表项,如下所示:
<nav id="notifications-menu">
<ul id="display-inline-block">
<li><a class="normal calendar" onclick="showUserCalendar('/', false);" href="#">My Calendar</a></li>
<li><a class="normal calendarteam" onclick="showTeamCalendar('/', false);" href="#">Team Calendar</a></li>
<li><div id="global-search-wrapper">
<input type="text" class="global-search-box" name="s" value="type search term..." />
<input type="image" src="/images/general/blank.gif" class="global-search-submit" value="" />
</div></li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
当应用以下CSS时,我得到以下输出.我想让列表项文本中心对齐(垂直):

nav#notifications-menu {
font-family: 'Adelle', sans-serif;
float:right;
height: 52px;
width:600px;
min-width:300px;
padding: 0px 18px 0px 0px;
text-align:right;
font-size:13px;
}
nav#notifications-menu #display-inline-block,
nav#notifications-menu #display-inline-block li {
/* Setting a common base */
margin: 0;
padding: 0;
}
nav#notifications-menu #display-inline-block li { …Run Code Online (Sandbox Code Playgroud) 如何将#box div垂直居中在页面中心?我试过vertical-align:middle; 但它不起作用.你可以在这里查看网站
这是css:
iframe {
position: fixed;
width: 100vw;
height: 100vh;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
body {
background-color: #000;
}
#box {
text-align: center;
vertical-align: middle;
}
#link {
color: #FFF;
}
#download {
color: #FFF;
}
Run Code Online (Sandbox Code Playgroud)