CSS 센터 디스플레이 인라인 블록?
여기에 작동 코드가 있습니다 : http://jsfiddle.net/WVm5d/ (정렬 중심 효과를 보려면 결과 창을 더 크게 만들어야 할 수도 있습니다)
질문
코드는 정상적으로 작동하지만을 좋아하지 않습니다 display: table;
. 랩 클래스 정렬 센터를 만들 수있는 유일한 방법입니다. display: block;
또는 사용 방법이 있으면 더 좋을 것이라고 생각합니다 display: inline-block;
. 정렬 센터를 다른 방법으로 해결할 수 있습니까?
컨테이너에 고정을 추가하는 것은 옵션이 아닙니다.
JS Fiddle 링크가 나중에 끊어지면 여기에 코드를 붙여 넣을 것입니다.
body {
background: #bbb;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: table;
overflow: hidden;
}
.sidebar {
width: 200px;
float: left;
background: #eee;
}
.container {
margin: 0 auto;
background: #ddd;
display: block;
float: left;
padding: 5px;
}
.box {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
float: left;
}
.box:nth-child(3n+1) {
clear: left;
}
<div class="wrap">
<div class="sidebar">
Sidebar
</div>
<div class="container">
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
</div>
<div class="sidebar">
Sidebar
</div>
</div>
display: inline-block
100 % 너비 부모 내에서 가로 및 세로 중앙에 자식 요소가 있어야하기 때문에 허용 된 솔루션이 작동하지 않습니다 .
I used Flexbox's justify-content
and align-items
properties, which respectively allow you to center elements horizontally and vertically. By setting both to center
on the parent, the child element (or even multiple elements!) will be perfectly in the middle.
This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.
Here is a CodePen demo and a snippet of the relevant code below:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
display: inline-block;
}
<div class="parent">
<a class="child" href="#0">Button</a>
</div>
Try this. I added text-align: center
to body and display:inline-block
to wrap, and then removed your display: table
body {
background: #bbb;
text-align: center;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
If you have a <div>
with text-align:center;
, then any text inside it will be centered with respect to the width of that container element. inline-block
elements are treated as text for this purpose, so they will also be centered.
You can also do this with positioning, set parent div to relative and child div to absolute.
.wrapper {
position: relative;
}
.childDiv {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
I just changed 2 parameters:
.wrap {
display: block;
width:661px;
}
You don't need to use "display: table". The reason your margin: 0 auto centering attempt doesn't work is because you didn't specify a width.
This will work just fine:
.wrap {
background: #aaa;
margin: 0 auto;
width: some width in pixels since it's the container;
}
You don't need to specify display: block since that div will be block by default. You can also probably lose the overflow: hidden.
Great article i found what worked best for me was to add a % to the size
.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}
Just use:
line-height:50px
Replace "50px" with the same height as your div.
참고URL : https://stackoverflow.com/questions/4980525/css-center-display-inline-block
'Programming' 카테고리의 다른 글
Django South-테이블이 이미 존재합니다 (0) | 2020.05.14 |
---|---|
익명의 재귀 PHP 함수 (0) | 2020.05.14 |
React / JSX에 스크립트 태그 추가 (0) | 2020.05.14 |
Git에 의해 커밋되지 않은 변경 사항을 Master에서 새 지점으로 변경 (0) | 2020.05.14 |
Excel에서 행을 변경하여 다른 변수를 일정하게 유지하는 방법 (0) | 2020.05.14 |