css tooltip border - توسيط عمود باستخدام Twitter Bootstrap 3
الطريقة المفضلة للأعمدة المركزية هي استخدام "الإزاحات" (على سبيل col-md-offset-3
: col-md-offset-3
)
لعناصر توسيط ، هناك فئة مساعد center-block
.
يمكنك أيضًا استخدام مركز النص إلى النص الأوسط (والعناصر المضمنة).
العرض التوضيحي : http://bootply.com/91632
EDIT - كما هو مذكور في التعليقات ، تعمل center-block
على محتويات العمود display:block
عناصر display:block
، ولكنها لن تعمل على العمود نفسه ( col-*
divs) لأن Bootstrap يستخدم float
.
تحديث 2018
الآن مع Bootstrap 4 ، تغيرت طرق التمركز ..
- لا يزال يتم استخدام
text-center
display:inline
عناصرdisplay:inline
- يستبدل
mx-auto
center-block
display:block
المركزdisplay:block
عناصرdisplay:block
- يمكن استخدام
offset-*
أوmx-auto
لأعمدة الشبكة المركزية
mx-auto
(auto x-axis margins) هي مركز display:block
أو display:flex
elements التي لها عرض محدد ، ( %
، vw
، px
، etc ..). يتم استخدام Flexbox افتراضيًا على أعمدة الشبكة ، لذا توجد أيضًا طرق توسيط متعددة في صندوق المرنة.
بالنسبة إلى التمركز الرأسي في BS4 ، راجع https://stackoverflow.com/a/41464397/171456
كيف أقوم بتوسيط قسم حجم عمود واحد داخل الحاوية (12 عمودًا) في Twitter Bootstrap 3.
يرجى الاطلاع على fiddle بداية.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
لذا ، أريد قسمًا ، مع centered
الطبقة centered
أن تكون متمركزة داخل الحاوية. قد أستخدم صفًا إذا كان هناك عدة أقسام ، ولكن في الوقت الحالي ، أريد فقط الحصول على div بحجم عمود واحد داخل الحاوية (12 عمودًا).
أنا أيضا لست متأكدا من أن النهج المذكور أعلاه جيد بما فيه الكفاية حيث أن القصد ليس التعويض عن النصف بمقدار النصف. لا أحتاج إلى مساحات حرة خارج div
ومحتويات div
تنكمش في نسبة. أريد أن أفرغ مساحة خارج div لتكون موزعة بالتساوي (يتقلص حتى عرض الحاوية == عمود واحد).
ببساطة قم بإضافة هذا إلى ملف CSS المخصص الخاص بك ، تحرير ملفات Bootstrap CSS مباشرة غير مستحسن ويمنع قدرتك على استخدام cdn.
.center-block {
float: none !important
}
لماذا ا؟
يستخدم Bootstrap CSS (الإصدار 3.7 والإصدارات الأقل): margin: 0 auto؛ ، ولكن يتم تجاوزه بواسطة خاصية Float لحاوية الحجم.
ملاحظة : بعد إضافة هذه الفئة لا تنس أن تحدد الطبقات حسب الترتيب الصحيح.
<div class="col-md-6 center-block">Example</div>
تتمثل الطريقة التي أتبعها لأعمدة المركز في استخدام display: inline-block
للأعمدة text-align: center
الوالد الحاوي.
كل ما عليك فعله هو إضافة فئة CSS 'centered' إلى row
.
HTML:
<div class="container-fluid">
<div class="row centered">
<div class="col-sm-4 col-md-4">
Col 1
</div>
<div class="col-sm-4 col-md-4">
Col 2
</div>
<div class="col-sm-4 col-md-4">
Col 3
</div>
</div>
</div>
CSS:
.centered {
text-align: center;
font-size: 0;
}
.centered > div {
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
}
JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/
هذا يعمل. من غير المحتمل أن يكون هناك طريقة غير ملائمة ، لكنها تعمل بشكل جيد. تم اختباره من أجل الاستجابة (Y).
.centered {
background-color: teal;
text-align: center;
}
ما عليك سوى تعيين العمود الذي يعرض محتوى col-xs-12 (mobile-first ؛-) وتكوين الحاوية فقط للتحكم في مدى اتساع المحتوى الذي تريده ، لذلك:
.container {
background-color: blue;
}
.centered {
background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
<div class="col-xs-12 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
<body class="container col-xs-offset-1 col-xs-10">
<div class="col-xs-12 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
للحصول على عرض توضيحي ، راجع http://codepen.io/Kebten/pen/gpRNMe :-)
ربما هذا ليس أفضل إجابة ، ولكن هناك حل أكثر إبداعًا لهذا. كما أشار koala_dev تعمل إزاحة العمود فقط حتى أحجام الأعمدة. ومع ذلك ، من خلال تداخل الصفوف يمكنك تحقيق توسيط أعمدة غير متساوية كذلك.
للالتزام بالسؤال الأصلي حيث تريد توسيط عمود من 1 داخل شبكة من 12.
- توسيط عمود من 2 عن طريق موازنة 5
- أنشئ صفًا متداخلاً ، بحيث تحصل على 12 عمودًا جديدًا داخل عمودين.
- نظرًا لأنك ترغب في توسيط عمود من 1 ، و 1 هو "نصف" من 2 (ما تمركز في الخطوة 1) ، تحتاج الآن إلى توسيط عمود من 6 في الصف المتداخل ، والذي يتم بسهولة عن طريق تعويضه 3.
فمثلا:
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-2">
<div class="row">
<div class="col-md-offset-3 col-md-6">
centered column with that has an "original width" of 1 col
</div>
</div>
</div>
</div>
</div>
انظر هذا الكمان ، يرجى ملاحظة أنه يجب عليك زيادة حجم نافذة الإخراج لترى النتيجة أيضًا ، وإلا ستقوم الأعمدة بالالتفاف.
يمكننا تحقيق ذلك باستخدام آلية تخطيط الجدول -
الآلية هي -
- لف جميع الأعمدة في div واحدة
- اجعل ذلك div كجدول ذو تخطيط ثابت
- اجعل كل عمود كخلية جدول
- استخدم خاصية المحاذاة العمودية للتحكم في موضع المحتوى
النموذج التجريبي here
بما أن koala_dev مستخدم في منهجه 1 ، فإنني أفضل طريقة الإزاحة بدلاً من الكتلة المركزية أو الهوامش ذات الاستخدام المحدود ، ولكن كما ذكر:
الآن ، هناك عيب واضح لهذه الطريقة ، إنها تعمل فقط حتى مع أحجام الأعمدة ، لذلك فقط .col-X-2 ، .col-X-4 ، col-X-6 ، col-X-8 و col-X- 10 معتمدة.
هذا يمكن حلها باستخدام النهج التالي للأعمدة الفردية.
<div class="col-xs-offset-5 col-xs-2">
<div class="col-xs-offset-3">
// Your content here
</div>
</div>
لأولئك الذين يتطلعون إلى توسيط عناصر الأعمدة على الشاشة عندما لا يكون لديك الرقم الدقيق لملء الشبكة ، كتبت قطعة صغيرة من جافا سكريبت لإرجاع أسماء الفئات:
function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
var arrayFill = function (size, content) {
return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
};
var elementSize = parseInt(12 / elementsPerRow, 10);
var normalClassName = 'col-' + screenSize + '-' + elementSize;
var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
var ret = arrayFill(numberOfFittingElements, normalClassName);
var remainingSize = 12 - numberOfRemainingElements * elementSize;
var remainingLeftSize = parseInt(remainingSize / 2, 10);
return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}
إذا كان لديك 5 عناصر وترغب في الحصول على 3 لكل صف على شاشة md
، md
بذلك:
colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]
ضع في اعتبارك ، يجب أن تكون الوسيطة الثانية قابلة للتوزيع على 12.
يمكنك استخدام flexbox حل جدا felxible إلى bootstrap الخاص بك
justify-content: center;
يمكن مركز العمود الخاص بك
تحقق من هذا الرابط من https://css-tricks.com/almanac/properties/f/flex/
جرب هذا
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
يمكنك استخدام col
آخر مثل col-md-2
وما إلى ذلك.
لا تنس أن تضيف !important
بعد ذلك ، يمكنك التأكد من أن العنصر سيكون في الواقع في الوسط:
.col-centered{
float: none !important;
margin: 0 auto !important;
}
طريقة 1:
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5">
YOUR CONTENT
</div>
</div>
</div>
الطريقة الثانية:
CSS
.float-center{float: none;}
<div class="container">
<div id="mydev" class="center-block float-center" style="width:75%;">
YOUR CONTENT
</div>
</div>
نصائح OnAirCode ، أمثلة وأدوات: OnAirCode
ما أقترحه هو ببساطة استخدام مركز النص الصف
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>