كيفية محاذاة العناصر عموديًا في div؟
https://stackoverflow.com/questions/79461
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي div مع صورتين و h1.يجب أن تكون جميعها محاذية عموديًا داخل القسم، بجانب بعضها البعض.
يجب أن تكون إحدى الصور absolute المتمركزة داخل شعبة.
ما هو CSS المطلوب لكي يعمل هذا على جميع المتصفحات الشائعة؟
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
المحلول
واو، هذه المشكلة شائعة.إنه مبني على سوء فهم في vertical-align ملكية.وهذا المقال الرائع يشرح ذلك:
فهم vertical-align, أو "كيف (لا) يتم توسيط المحتوى عموديًا" بواسطة جافين كيستنر.
"كيفية التركيز في CSS" هي أداة ويب رائعة تساعد في العثور على سمات توسيط CSS الضرورية لمواقف مختلفة.
شيء صغير (ولمنع تعفن الارتباط):
- العناصر المضمنة (و فقط العناصر المضمنة) يمكن محاذاة عموديًا في سياقها عبر
vertical-align: middle.ومع ذلك، فإن "السياق" لا يمثل ارتفاع الحاوية الأصلية بالكامل، بل هو ارتفاع سطر النص الموجود فيه. مثال jsfiddle - بالنسبة لعناصر الكتلة، تكون المحاذاة العمودية أصعب وتعتمد بشدة على الموقف المحدد:
- إذا كان العنصر الداخلي يمكن أن يحتوي على ارتفاع ثابت, ، يمكنك تحديد موقفها
absoluteوتحديد لهاheight,margin-topوtopموضع. مثال jsfiddle - إذا كان العنصر المتمركز يتكون من سطر واحد و ارتفاعها الأصلي ثابت يمكنك ببساطة ضبط الحاوية
line-heightلملء ارتفاعه.هذه الطريقة متعددة الاستخدامات في تجربتي. مثال jsfiddle - … هناك المزيد من هذه الحالات الخاصة.
- إذا كان العنصر الداخلي يمكن أن يحتوي على ارتفاع ثابت, ، يمكنك تحديد موقفها
نصائح أخرى
الآن بعد أن تزايد دعم flexbox، فإن تطبيق CSS هذا على العنصر المحتوي سيؤدي إلى توسيط العنصر المضمن عموديًا:
.container {
display: flex;
align-items: center;
}
استخدم الإصدار البادئ إذا كنت بحاجة أيضًا إلى استهداف Explorer 10 ومتصفحات Android القديمة (<4.4):
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
لقد استخدمت هذا الكود البسيط للغاية:
لغة البرمجة:
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
CSS:
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
من الواضح أنه سواء كنت تستخدم ملف .class أو #id, ، لن تتغير النتيجة.
عملت معي:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
تقنية من صديق لي:
لغة البرمجة:
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
CSS:
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
تجريبي هنا
يجب أن تتم محاذاتها جميعًا رأسيًا داخل القسم
محاذاة كيف؟قمم الصور تتماشى مع الجزء العلوي من النص؟
يجب أن يتم وضع إحدى الصور بشكل مطلق داخل القسم.
وضعه تماما بالنسبة إلى DIV؟ربما يمكنك رسم ما تبحث عنه...؟
وقد وصف فد خطوات تحديد المواقع المطلقة، وكذلك ضبط عرض H1 عنصر بحيث تظهر الصور مضمنة معه.إلى ذلك، سأضيف أنه يمكنك محاذاة الصور باستخدام vertical-align أسلوب:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
... سيؤدي هذا إلى تجميع الرأس والصور معًا، مع محاذاة الحواف العلوية.توجد خيارات محاذاة أخرى؛ انظر الوثائق.قد تجد أيضًا أنه من المفيد إسقاط ملف DIV ونقل الصور داخل الملف H1 العنصر - يوفر هذا قيمة دلالية للحاوية، ويزيل الحاجة إلى ضبط عرض العنصر H1:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
لوضع عناصر الكتلة في المركز (يعمل في IE9 وما فوق)، يحتاج إلى غلاف div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
استخدم هذه الصيغة، وستعمل دائمًا بدون شقوق:
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>تحتاج جميع الطرق تقريبًا إلى تحديد الارتفاع، ولكن في كثير من الأحيان لا يكون لدينا أي ارتفاعات.
إذن، إليك خدعة CSS3 المكونة من 3 أسطر والتي لا تتطلب معرفة الارتفاع.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
إنه مدعوم حتى في IE9.
مع بادئات البائعين الخاصة بها:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
مصدر: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
خدعتي هي وضع جدول داخل div يحتوي على صف واحد وعمود واحد، وتعيين 100% من العرض والارتفاع، وضبط الخاصية محاذاة رأسية:متوسطة.
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
بشكل افتراضي، h1 هو عنصر كتلة وسيتم عرضه على السطر بعد الصورة الأولى، وسيتسبب في ظهور الصورة الثانية على السطر الذي يلي الكتلة.
لمنع حدوث ذلك، يمكنك ضبط h1 ليكون له سلوك التدفق المضمّن:
#header > h1 { display: inline; }
أما بالنسبة لتحديد موضع الصورة تمامًا داخل القسم, ، فأنت بحاجة إلى تعيين div المحتوي على "حجم معروف" قبل أن يعمل هذا بشكل صحيح.من خلال تجربتي، تحتاج أيضًا إلى تغيير سمة الموضع بعيدًا عن السمة الافتراضية - الموضع:الأعمال النسبية بالنسبة لي:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
إذا تمكنت من تنفيذ ذلك، فقد ترغب في محاولة إزالة سمات الارتفاع والعرض والموضع تدريجيًا من div.header للحصول على الحد الأدنى من السمات المطلوبة للحصول على التأثير الذي تريده.
تحديث:
فيما يلي مثال كامل يعمل على Firefox 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
باستخدام CSS للمركز العمودي، يمكنك السماح للحاويات الخارجية بالعمل كجدول، والمحتوى كخلية جدول.في هذا التنسيق، ستبقى كائناتك في المنتصف.:)
لقد قمت بتداخل كائنات متعددة في JSFiddle على سبيل المثال، ولكن الفكرة الأساسية هي كما يلي:
لغة البرمجة
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* act as a table so we can center vertically its child */
display: table;
/* set dimensions */
height: 200px;
width: 200px;
/* horizontal center text */
text-align: center;
/* create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* act as a table cell */
display: table-cell;
/* and now we can vertically center! */
vertical-align: middle;
/* some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
مثال الكائنات المتعددة:
لغة البرمجة
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
نتيجة
قد نستخدم حساب دالة CSS لحساب حجم العنصر ثم تحديد موضع العنصر الفرعي وفقًا لذلك.
مثال HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
و CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
تم إنشاء العرض التوضيحي هنا: https://jsfiddle.net/xnjq1t22/
يعمل هذا الحل بشكل جيد مع الاستجابة div height و width أيضًا.
ملحوظة:لم يتم اختبار وظيفة الحساب للتأكد من توافقها مع المتصفحات القديمة.
وفقًا لليوم، وجدت حلاً جديدًا لمحاذاة أسطر نصية متعددة عموديًا في div باستخدام CSS3 (وأنا أستخدم أيضًا نظام شبكة bootstrap v3 لتجميل واجهة المستخدم)، وهو على النحو التالي:
.immediate-parent-of-text-containing-div{
height: 50px; /* or any fixed height that suits you.*/
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}
وفقًا لما أفهمه، يجب أن يكون للأصل المباشر للنص الذي يحتوي على عنصر بعض الارتفاع.آمل أن يساعدك ذلك أيضًا.شكرًا!
هناك طريقتان لمحاذاة العناصر عموديًا وأفقيًا
1.بوتستراب 4.3.X
للمحاذاة العمودية: d-flex align-items-center
للمحاذاة الأفقية: d-flex justify-content-center
.container {
height: 180px;
width:100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center bg-info container">
<div class="bg-light p-2">I am in Center</div>
</div>2.CSS3
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}<div class="container">
<div class="child">I am in Center</div>
</div>ما عليك سوى استخدام جدول من خلية واحدة داخل div!ما عليك سوى ضبط ارتفاع الخلية والجدول على 100% ويمكنك استخدام المحاذاة الرأسية.
يتعامل الجدول المكون من خلية واحدة داخل div مع المحاذاة الرأسية ويتوافق مع الإصدارات السابقة التي تعود إلى العصر الحجري!
أستخدم الحل التالي (بدون تحديد المواقع أو ارتفاع الخط) منذ أكثر من عام، وهو يعمل مع IE 7 و8 أيضًا.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
هذا هو الحل الشخصي لعنصر i داخل div
لغة البرمجة
<div class="circle">
<i class="fa fa-plus icon">
</i></div>
CSS
.circle {
border-radius: 50%;
color: blue;
background-color: red;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
.icon {
font-size: 50px;
vertical-align: middle;
}
بالنسبة لي، عملت بهذه الطريقة:
<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
<a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>
تم تحويل العنصر "a" إلى زر باستخدام فئات Bootstrap، وهو الآن متمركز رأسيًا داخل "div" خارجي.
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
فقط هذا:
<div>
<table style="width: 100%; height: 100%">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table>
</div>
يتعامل الجدول المكون من خلية واحدة داخل div مع المحاذاة الرأسية ويتوافق مع الإصدارات السابقة التي تعود إلى العصر الحجري!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html>
إليك طريقة أخرى (سريعة الاستجابة):
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}
أنا رجل .NET دخل للتو في برمجة الويب.لم أستخدم CSS (حسنًا، قليلًا).لقد استخدمت القليل من جافا سكريبت لإنجاز التوسيط الرأسي مع وظيفة .css الخاصة بـ jQuery.
أنا فقط أقوم بنشر كل شيء من اختباري.ربما لا يكون الأمر أنيقًا للغاية، لكنه يعمل حتى الآن.
script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();
var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';
$(id).css({top: newTop});
}
function showAlert(){
alert("alert");
}
$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});
$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})
</script>
<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>
<body>
<div id="div1">
<div id="buttonLeft">
<button id="testerbtn">tester</button>
</div>
<div id="buttonRight"></div>
</div>
</body>
</head>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
أو CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
