it-swarm.dev

المحاذاة العمودية للنص والرمز في الزر

أواجه مشكلة في محاذاة رأسية لأيقونة الخط مع النص داخل زر أسفل إطار Bootstrap. لقد جربت العديد من الأشياء بما في ذلك ضبط ارتفاع الخط ، لكن لا شيء يعمل.

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

كيف يمكنني الحصول على هذا العمل؟

51
Shane

هناك قاعدة واحدة تم تعيينها بواسطة font-awesome.css ، والتي تحتاج إلى تجاوزها.

يجب عليك تعيين تخطيات في ملفات CSS بدلاً من تضمينها ، ولكن في الأساس ، يتم تعيين فئة رمز ok إلى vertical-align: baseline; افتراضيًا والتي قمت بتصحيحها هنا:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

مثال هنا: http://jsfiddle.net/fPXFY/4/ وإخراجها هو:

enter image description here

لقد قمت بتقليل حجم حجم الخط الخاص بالأيقونة أعلاه في هذه الحالة إلى 30px ، حيث إنه يبدو أكبر من اللازم في 40px بالنسبة لحجم الزر ، ولكن هذا يمثل وجهة نظر شخصية بحتة. يمكنك زيادة الحشو على الزر للتعويض إذا لزم الأمر:

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

إنتاج: http://jsfiddle.net/fPXFY/5/ التي ينتج عنها:

enter image description here

85
nickhar

بدلاً من ذلك ، إذا كنت تستخدم bootstrap ، فيمكنك فقط إضافة align-middle لمحاذاة العنصر رأسياً.

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">Continue
    <i class="icon-ok align-middle" style="font-size:40px;"></i>
</button>
0
Ali Kazai