سؤال

كيفية توسيط أفقيا التمهيد 3 btn-toolbar زر داخل col-lg شعبة?

      <div class="col-lg-6 col-sm-3 noleftpad">
          <div class="well topnestedbut">   
              <div class="btn-toolbar nested-top">
                  <button type="button" class="btn btn-default btn-sm"><strong>This must be centered</strong></button>
              </div>
          </div>
      </div>

المغلق:

.btn-toolbar.nested-top{
    position:absolute;
    top:0px;
    text-align:center;
}

.well.topnestedbut{
    padding:35px 10px 10px;
}

.noleftpad{
    padding-left:0px;
}

أريد أن يتم إرفاق الزر إلى الجزء العلوي من ديف الحاوية ، وأيضا توسيط:enter image description here

هل كانت مفيدة؟

المحلول

إليك ما فعلته:

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

إذا قمت بتعيين العرض 100٪ على هذا العنصر ، فسيشغل 100 ٪ من عرض الحاويات الأصل (أو النسبي).

http://jsfiddle.net/Per3m/3/

.btn-toolbar.nested-top{
    text-align:center;
    position:absolute;
        top:0;
    width:100%;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top