如何居中div水平其父里面div用CSS？
<div id='parent' style='width: 100%;'>
<div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
我有这样的标记:
<div>
<img />
</div>
div高于img:
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
我需要将图像放在div的中间(在其上方和下方具有相同的空白区域).
我尝试过这个并不起作用:
div {
vertical-align: middle;
}
带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.
这是我的例子:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>display: -webkit-flex;.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)
测试链接:
我希望我的<p>元素位于容器的中心<div>,就像完美居中一样 - 顶部,底部,左侧和右侧边距平均分割空间.
我怎样才能做到这一点？
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>此HTML代码有效:
<div class="MyContainer" align="center">
<div>THIS DIV IS CENTERED</div>
</div>
但是我想在容器的css上做这样的事情,例如:
.MyContainer{
align: center;
}
所以我的所有容器都将div放在里面.
我试图垂直对齐导航栏上的图标，然后尝试使用这种方法：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这是我的代码：
的HTML
<div class="navbar">
<nav>
<ul>
<% if logged_in? %>
<li><%= link_to "IOAKA", dashboard_path %></li>
<li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon",
:class => "icon", :id => "ioaka_icon2"), dashboard_path) %></li>
<li><%= link_to(image_tag("icon_settings.png", alt: "geometry settings icon",
:class => "icon", :id => "settings_icon"), edit_user_path(current_user)) %></li>
<li><%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon",
:class => "icon", :id => "logout_icon"), logout_path, method: "delete") %></li>
<% else %>
<li><%= link_to "IOAKA", root_path %></li>
<li><%= link_to(image_tag("icon_login.png", alt: …我想在我的css表中使用百分比.不幸的是,它对我不起作用.
这段代码出了什么问题？我应该使用flexbox而不是table吗？
我想用表,因为我想要相同的高度列.
ul {
list-style: none;
margin: 0;
display: table;
table-layout: fixed;
width: 100%;
}
li {
width: 50%;
display: table-cell;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>我遇到了使文本显示在网页中间（高度方向）的问题。该网站的HTML是：
<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>
我想做的是让home-container元素一直延伸到页面底部，并在页面text that should be in the middle中间。我的css样子是：
html, body{
height:100%;
}
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
}
.home-row{
vertical-align: middle;
}
我知道，如果我做home-container这样的话，我想做的事情是可能的：
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
align-items: center;
display: flex;
}
但这不适用于所有浏览器。我在做错什么vertical-align物业？在我的示例中，Id并没有真正做任何事情...
我尝试使用flexbox方法,表格方法和其他一些方法垂直居中一个未知高度的div,但我的div没有正确居中.我希望居中div的宽度为窗口宽度的50%或最小宽度为200px.
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>如何在页面中心对齐3个浮动div？
<div style="width:100%">
<div style="width:90%">
<div style="width:80%">
//Content
</div>
</div>
</div>