Как центрировать содержимое в DIV

Я пытаюсь центрировать содержимое, которое содержит таблицу внутри DIV ... Но я не могу работать, как это сделать ...Как центрировать содержимое в DIV

основном Id хотел поставить некоторый текст рядом со столом, и в центре таблицы и текст на странице ...

содержание Я пытаюсь центра:

 <div style="background: purple; padding: 5px;"> 
      <div> 
      <table style="float: left;"> 
       <tr> 
        <th>This</th> 
        <th>is</th> 
        <th>a</th> 
        <th>test</th> 
       </tr> 
      </table> 
      </div> 
      <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span> 
     </div>

То, что я пытался:

<div style="background: red; width: 100%; text-align: center"> 
     <div style="background: purple; padding: 5px;"> 
      <div> 
      <table style="float: left;"> 
       <tr> 
        <th>This</th> 
        <th>is</th> 
        <th>a</th> 
        <th>test</th> 
       </tr> 
      </table> 
      </div> 
      <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span> 
     </div> 
    </div>

Если кто-то сможет сказать мне, что я делаю неправильно, это было бы очень эффективно.

источник

2013-04-03 craig1231

Дайте родительскому 'div' (то есть с фиолетовым фоном) ширину, а затем используйте' margin: 0 auto'. – BenM

Мой прокси-сервер не позволяет jsfiddle ... извините :( – craig1231

Вот как вы могли бы сделать, что:

http://jsfiddle.net/7TEqW/2/

HTML:

<div class="outer"> 
    <div class="inner"> 
     <table> 
      <tr> 
       <td>TABLE TEXT</td> 
      </tr> 
     </table> 
     <span>SPAN TEXT</span> 
    </div> 
</div>

CSS:

.outer { 
    width: 100%; 
    text-align: center; 
} 

.inner { 
    display: inline-block; 
    margin: 0 auto; 
} 

table { 
    width: 200px; 
    float: left; 
    margin-right: 20px; 
    background: #999; 
} 

span { 
    display: inline-block; 
    width: 100px; 
    background: #ccc; 
}

источник

2013-04-03 10:11:19

Это не сработает с его плавающими элементами. – BenM

@BenM - Мой плохой, я обновил свой ответ. –

Хорошо, текст находится рядом с таблицей, но текст и таблица не сосредоточены на странице ... – craig1231

float:left Удалить и попробуйте добавить margin:0 auto

.wrap{ 
background: purple; padding: 5px;  
    text-align:center; 
    overflow:auto; 
    position:relative 
} 
table{ 
    background:pink; 
    margin:0 auto 
} 

span{ 
    background: yellow; margin-left: 15px; 
     margin:0 auto 
}

DEMO

источник

2013-04-03 10:15:27 Sowmya

Мой прокси-сервер не разрешает jsfiddle ... извините :( – craig1231

Вы можете центрировать элементы с помощью text-align:center если они inline или inline-block. Если мы удалим поплавки и расположим их рядом друг с другом, используя display:inline-block на <table>, этот метод можно использовать.

jsFiddle

CSS

table { 
    display:inline-block; 
} 
.wrapper { 
    text-align:center; 
}

HTML

<div class="wrapper" style="background: purple; padding: 5px;"> 
    <table> 
     <tr> 
      <th>This</th> 
      <th>is</th> 
      <th>a</th> 
      <th>test</th> 
     </tr> 
    </table> 
    <span style="background: yellow; margin-left: 15px;">This is a test</span> 
</div>

источник

2013-04-03 10:18:24

Текст в диапазоне отображается под таблицей в IE, что не то, что я сожалею. Текст должен быть рядом с таблицей. – craig1231

вы можете предоставить идентификатор внутренней DIV сказать, внутренний и внешний сказать к началу DIV:

#outer{width:100%} 
#inner{float:none;margin:0 auto;display:table;}

если не найдена проблема, дайте мне знать!

источник

2013-04-03 10:44:48

Введите нужный контент в элемент <p style="text-align: center;"> , и он будет расположен по горизонтали.

источник

2016-05-11 14:11:15

Как центрировать содержимое в DIV

ответ

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