Центрирующие элементы с неизвестной шириной

Рассмотрите следующую проблему: вы хотите центрировать меню, которое изменит его содержимое (например, после нажатия кнопки содержимое первой кнопки должно быть установлено с «Hello» на «Приветствия» , пользователь! »Или что-то в этом направлении. Важно то, что ширина элементов будет переменной.Центрирующие элементы с неизвестной шириной

Предположим, что вы также хотите центрировать содержимое вашего элемента. Подход, который я нашел, в основном таков:

.centerMe1 { 
    margin-right: auto ; 
    margin-left: auto ; 
    max-width: 500px; 
}

Это работает очень хорошо, за исключением того, что я не могу использовать его в этом случае, так как я не знаю ширину элемента. Я пытался нам e float: left, потому что он устанавливает ширину родительского элемента равным ширине его дочерних элементов, но он не работает. В основном ширина была установлена правильно, но элемент не был центрирован.

Это второй класс:

.centerMe2 { 
    margin-right: auto ; 
    float: left; 
    margin-left: auto ; 
}

И весь исходный код (чтобы сделать тестирование проще)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Center Error</title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> 
     <script src="http://code.jquery.com/jquery.js"></script> 
     <style type="text/css"> 
      .centerMe1 { 
       margin-right: auto ; 
       margin-left: auto ; 
       max-width:500px; 
      } 
      .centerMe2 { 
       margin-right: auto ; 
       float: left; 
       margin-left: auto ; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="row-fluid"> 
     <div class="span12"> 
      <ul class="nav nav-pills centerMe1"> 
       <li class="active"><a href="#">adsadw er sdfw</a> </li> 
       <li><a href="#">QQQQQQQQQQQQQ</a></li> 
       <li><a href="#">some other random gibberish</a></li> 
      </ul> 
     </div> 
     </div> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

источник

2013-08-14 Bloodcount

'.centerMe1' будет работать отлично, если вы удалите атрибут max-width. 'float' не работает – x4rf41

Будет ли решение js недоступно для вас? –

Думаю, вам нужно добавить класс css-text-center в свой контейнер. И btw, давая div, класс «span12» довольно избыточен. Вы можете просто удалить этот div. – Itay

Если вы сделаете ul блоковый элемент, поэтому он будет занимать в полной ширине, вы можете установить li на display:inline-block. Теперь, когда li элемента является встроенным блоком они могут быть центрированы text-align:center;

ul { 
    display:block; 
    text-align:center; 
} 

li { 
    display:inline-block; 
}

скрипка:

http://jsfiddle.net/CZ9pX/1/

источник

2013-08-14 08:25:02 koningdavid

вы просто должны дать

text-align:center;

к внешний контейнер, не используйте float. использование display:block.

div{ text-align:center;display:block} 
div span{font-size:12px;}

Это сделает промежуток в середине.

источник

2013-08-14 08:47:48 Ankit

Центрирующие элементы с неизвестной шириной

ответ

Смежные вопросы