Centrowanie pływających div w innym div
Przeszukałem inne pytania i chociaż ten problem wydaje się podobny do kilku innych, nic, co widziałem do tej pory, nie wydaje się rozwiązywać problemu, który mam.
Mam div, który zawiera kilka innych div, z których każdy jest wypalony w lewo. Każda z nich zawiera zdjęcie i podpis. Chcę tylko, aby grupa zdjęć była wyśrodkowana wewnątrz zawierającego div.
Jak widać z poniższego kodu, próbowałem użyć zarówno overflow:hidden
jak i margin:x auto
na rodzicach divów, a Dodałem również clear:both
(zgodnie z sugestią w innym temacie) po zdjęciach. Nic nie robi różnicy.
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
7 answers
Najpierw usuń atrybut float
na wewnętrznej div
s. następnie umieść text-align: center
na głównej zewnętrznej div
. I dla wewnętrznej div
s,
użycie display: inline-block
. Może być również mądre, aby dać im wyraźne szerokości zbyt.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-14 18:07:12
Za pomocą Flexbox możesz łatwo wyśrodkować poziomo (i pionowo) pływające dzieci wewnątrz div.
Więc jeśli masz takie proste znaczniki:
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Z CSS:
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
(jest to (oczekiwany - i niepożądany) wynik )
Teraz dodaj następujące zasady do opakowania:
display: flex;
justify-content: center; /* align horizontal */
/ Align = "center" bgcolor = "# e0ffe0 " / król Danii / / align = center / ( DEMO)
Tylko dla zabawy, aby uzyskać wyrównanie pionowe, jak również po prostu dodaj:
align-items: center; /* align vertical */
DEMO
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-06 07:46:24
Wykonałem powyższe za pomocą względnego pozycjonowania i unoszenia się w prawo.
Kod HTML:
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS:
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JSFiddle: http://jsfiddle.net/MJ9yp/
To będzie działać w IE8 i w górę, ale nie wcześniej(niespodzianka, niespodzianka! )
Niestety nie pamiętam źródła tej metody, więc nie mogę przypisać autorowi oryginału. Jeśli ktoś jeszcze wie, proszę o wstawienie linka!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-13 10:37:29
Poniższe rozwiązanie nie wykorzystuje bloków liniowych. Wymaga jednak dwóch pomocniczych divów:
- the content is floated
- wewnętrzny pomocnik jest unoszony (rozciąga się tak samo jak zawartość)
- wewnętrzny pomocnik jest popychany w prawo o 50% (jego lewy wyrównuje się ze środkiem zewnętrznego pomocnika)
- zawartość jest ciągnięta w lewo o 50% (jej środek wyrównuje się z lewą stroną wewnętrznego pomocnika)
- zewnętrzny pomocnik jest ustawiony, aby ukryć przepełnienie
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}
<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-22 12:49:50
display: inline-block;
nie działa w żadnej z przeglądarek IE. Oto, czego użyłem.
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-16 05:33:20
Rozwiązanie:
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-23 06:19:22
W moim przypadku nie mogłem uzyskać odpowiedzi od @ Sampson, aby pracować dla mnie, w najlepszym razie mam jedną kolumnę wyśrodkowaną na stronie. W tym procesie jednak dowiedziałem się, jak float faktycznie działa i stworzyłem To rozwiązanie. W jego rdzeniu poprawka jest bardzo prosta, ale trudno ją znaleźć w tym wątku, który miał więcej niż 146k wyświetleń w czasie tego postu bez wzmianki.
Wszystko, co jest potrzebne, to suma szerokości przestrzeni ekranu, którą będzie zajmował pożądany układ, a następnie zrobić rodzic o tej samej szerokości i zastosuj margines: auto. To jest to!
Elementy w układzie będą dyktować szerokość i wysokość" zewnętrznego " div. Weź szerokość lub wysokość każdego" myFloat " lub elementu + jego obramowania + jego marginesy i wypełnienia i dodaj je wszystkie razem. Następnie dodaj pozostałe elementy razem w ten sam sposób. To da ci szerokość rodzica. Wszystkie mogą być nieco różne rozmiary i można to zrobić z mniejszą lub większą liczbą elementów.
Ex.(każdy element ma 2 boki więc obramowanie, margines i padding są mnożone x2)
Więc element, który ma szerokość 10px, border 2px, margin 6PX, padding 3px wyglądałby tak: 10 + 4 + 12 + 6 = 32
Następnie dodaj wszystkie całkowite szerokości twojego elementu.
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
W tym przykładzie szerokość" zewnętrznego " div będzie wynosić 112.
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}
<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-23 04:32:44