vertically - vertical align css




محاذاة عموديًا بجوار صورة؟ (14)

أولاً ، لا يُنصح باستخدام CSS مضمّنة على الإطلاق ، فهذا يعني أنه قد أفسد شفرة HTML.

لمحاذاة الصورة والامتداد ، يمكنك ببساطة إجراء vertical-align:middle .

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

لماذا لا تتم vertical-align: middle العمل vertical-align: middle ؟ ومع ذلك ، vertical-align: top يعمل.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

استخدم line-height:30px بحيث تتم محاذاة النص للصورة:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

الحل متعدد الخطوط:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

يعمل في جميع المخالفين و ie9 +


بالنسبة للسجل ، يجب ألا تعمل "أوامر" المحاذاة على SPAN ، لأنها علامة مضمنة ، وليست علامة على مستوى الكتلة . لن تعمل أشياء مثل المحاذاة والهامش والحشو وما إلى ذلك على علامة مضمنة لأن نقطة المضمنة لا تؤدي إلى تعطيل تدفق النص.

يقسم CSS علامات HTML إلى مجموعتين: في الخط ومستوى الحظر. ابحث عن "css block vs inline" ومقالة رائعة تظهر ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(إن فهم مبادئ CSS الأساسية هو مفتاح عدم الإزعاج الشديد)


تغيير div في حاوية مرنة:

div {display:flex;}


الآن هناك طريقتان لتوسيط محاذاة جميع المحتويات:

طريقة 1:

div {align-items:center;}

DEMO

الطريقة الثانية:

div * {margin-top:auto; margin-bottom:auto;}

DEMO

جرب قيم العرض والارتفاع المختلفة في img وقيم حجم الخط المختلفة في span وستراه دائمًا في وسط الحاوية.


ربما تريد هذا:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

كما اقترح آخرون ، جرّب vertical-align على الصورة:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS ليس مزعجًا. أنت فقط لا تقرأ الوثائق . ؛ P


على زر jQuery mobile ، على سبيل المثال ، يمكنك تعديله قليلاً بتطبيق هذا النمط على الصورة:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

في الأساس ، سيكون عليك النزول إلى CSS3.

-moz-box-align: center;
-webkit-box-align: center;

فيما يلي بعض التقنيات البسيطة للمحاذاة العمودية:

خط واحد محاذاة رأسية: الأوسط

هذا سهل: قم بتعيين ارتفاع سطر عنصر النص على نفس قيمة الحاوية

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

محاور عمودية متعددة الخطوط: أسفل

ضع مطلقًا div داخليًا بالنسبة لحاوياته

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

خطوط متعددة محاذاة رأسية: وسط

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

إذا كان يجب عليك دعم الإصدارات القديمة من IE <= 7

من أجل جعل هذا العمل يعمل بشكل صحيح عبر اللوحة ، سيكون عليك اختراق CSS قليلاً. لحسن الحظ ، هناك علة IE تعمل لصالحنا. ضبط top:50% على الحاوية top:-50% على div الداخلية ، يمكنك تحقيق نفس النتيجة. يمكننا الجمع بين الاثنين باستخدام ميزة أخرى لا تدعمها IE: محددات CSS المتقدمة.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

ارتفاع الحاوية المتغيرة: محاذاة رأسية: وسط

يتطلب هذا الحل مستعرضًا أكثر حداثة قليلاً من الحلول الأخرى ، حيث إنه يستخدم خاصية transform: translateY . ( http://caniuse.com/#feat=transforms2d )

يؤدي تطبيق الأسطر الثلاثة التالية من CSS لعنصر إلى توسيطها رأسيًا ضمن نطاقها الرئيسي بغض النظر عن ارتفاع العنصر الرئيسي:

position: relative;
top: 50%;
transform: translateY(-50%);

لأنك تضطر إلى ضبط line-height على ارتفاع div لكي يعمل هذا


يجب عليك تطبيق vertical-align: middle على كلا العنصرين لتمركزها بشكل مثالي.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

تقوم الإجابة المقبولة بتوسيط الرمز حول نصف ارتفاع x للنص الموجود بجواره (كما هو موضح في مواصفات CSS ). والذي قد يكون جيدًا بما فيه الكفاية ، ولكن يمكن أن يبدو بعيدًا بعض الشيء ، إذا كان النص يحتوي على صعود أو هابطين يقفان في الأعلى أو الأسفل فقط:

على اليمين ، لا يتم محاذاة النص ، على اليمين كما هو موضح أعلاه. يمكن العثور على عرض حي في هذه المقالة حول المحاذاة العمودية .

هل تحدث أحد عن سبب vertical-align: top يعمل في السيناريو؟ من المحتمل أن تكون الصورة في السؤال أطول من النص وبالتالي تحدد الحافة العلوية لمربع الخط. vertical-align: top عنصر الامتداد ثم ضعه في أعلى مربع السطر.

يتمثل الاختلاف الرئيسي في السلوك بين vertical-align: middle top أن أول عنصر ينقل العناصر المتعلقة بخط الأساس للمربع (الذي يتم وضعه عند الحاجة للوفاء بجميع المحاذاة العمودية وبالتالي لا يمكن التنبؤ به ) والثاني بالنسبة إلى الحدود الخارجية مربع الخط (الذي هو ملموس أكثر).


يعمل هذا الرمز في IE وكذلك FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

يمكنك تعيين صورة inline element باستخدام خاصية display

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


background:url(../images/red_bullet.jpg) left 3px no-repeat;

أستخدم عمومًا 3 بكسل بدلاً من top . من خلال زيادة / تقليل تلك القيمة ، يمكن تغيير الصورة إلى الارتفاع المطلوب.





vertical-alignment