Выровнять html таблицу по центру: Как выровнять таблицу по центру окна браузера?

Leave a Comment / Html / By /

css — Выровнять таблицу по центру блока не толкая блоки рядом

В общем, вот есть наш сайт.И надо выровнять таблицу по центру так что бы картинка стояла на том же уровне что и без выравнивания(надеюсь понятно объясняюсь)

Html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>Пример веб-страницы</title>
</head>
<body>
<div>
    <h2>Выберите интересующую вас зону эпиляции</h2>
</div>
    <hr color="#965376" size="10px">
    <div>
        <p>
            Пройдите процедуру лазерной эпиляции в нашем центре косметологии<br>
            и лазерной эпиляции ДОШИ насладитесь прикосновениями<br>
            к своему гладкому и приятному телу
        </p>
    </div>
    <div>
        <img src="leftSide.png" alt="Здесь должна быть картинка">
        <h3>ПРАЙС:</h3>
            <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <td>консультация врача</td>
                    <td>бесплатно</td>
                </tr>
                <tr>
                    <th colspan="2">разовое посещение</th>
                </tr>
                <tr>
                    <td>1 любая зона</td>
                    <td>2980 руб</td>
                </tr>
                <tr>
                    <td>1 дополнительная зона</td>
                    <td>990 руб</td>
                </tr>
                <tr>
                    <td>всё тело</td>
                    <td>5980 руб</td>
                </tr>
                <tr>
                    <th colspan="2">абонемент на курс</th>
                </tr>
                <tr>
                    <td>1 любая зона</td>
                    <td>14900 руб</td>
                </tr>
                <tr>
                    <td>1 дополнительная зона</td>
                    <td>890 руб</td>
                </tr>
                <tr>
                    <td>всё тело</td>
                    <td>24900 руб</td>
                </tr>
            </table>
        <img src="rightSide.
 
  png" alt="Здесь должна быть картинка">
    </div>
</body>
</html>

CSS:

#price-list-header h2{
    font-size: 36px;
    text-align:center;
    color: #EB5674;
}
#priceListText{
    text-align: center;
    font-size: 28px;
    color: #4B494C;
}
#priceList{
}
#priceList h3{
    margin: 0 auto;
    width: 500px;
    text-align: center;
    color:#4F4C53;
}
#priceList table{
}
#leftSideImg{
    float: left;
}
#rightSideImg{
    float: right;
}
#priceListTable{
    align: center;
    font-size: 26px;
    border-width: 2px;
    width: 425px;
    height: 315px;
    text-align: center;
}
#priceListTable th{
}
.price{
    color: #EC5976;
}

1 

#price-list-header h2{
    font-size: 36px;
    text-align:center;
    color: #EB5674;
}

#priceListText{

    text-align: center;
    font-size: 28px;
    color: #4B494C;
}

#priceList{

}

#priceList h3{
    margin: 0 auto;
    width: 500px;
    text-align: center;
    color:#4F4C53;
}

#priceList table{

}

#leftSideImg{
    float: left;
}

#rightSideImg{
    float: right;
}

#priceListTable{
    align: center;
    font-size: 26px;
    border-width: 2px;
    width: 425px;
    height: 315px;
    text-align: center;
    margin:0 auto;
}

#priceListTable th{

}

.
  price{
    color: #EC5976;
}
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>Пример веб-страницы</title>
</head>
<body>
<div>
    <h2>Выберите интересующую вас зону эпиляции</h2>
</div>
    <hr color="#965376" size="10px">
    <div>
        <p>
            Пройдите процедуру лазерной эпиляции в нашем центре косметологии<br>
            и лазерной эпиляции ДОШИ насладитесь прикосновениями<br>
            к своему гладкому и приятному телу
        </p>
    </div>

    <div>
        <img src="leftSide.png" alt="Здесь должна быть картинка">
        <img src="rightSide.png" alt="Здесь должна быть картинка">
            <h3>ПРАЙС:</h3>
            <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <td>консультация врача</td>
                    <td>бесплатно</td>
                </tr>
                <tr>
                    <th colspan="2">разовое посещение</th>
                </tr>
                <tr>
                    <td>1 любая зона</td>
                    <td>2980 руб</td>
                </tr>
                <tr>
                    <td>1 дополнительная зона</td>
                    <td>990 руб</td>
                </tr>
                <tr>
                    <td>всё тело</td>
                    <td>5980 руб</td>
                </tr>
                <tr>
                    <th colspan="2">абонемент на курс</th>
                </tr>
                <tr>
                    <td>1 любая зона</td>
                    <td>14900 руб</td>
                </tr>
                <tr>
                    <td>1 дополнительная зона</td>
                    <td>890 руб</td>
                </tr>
                <tr>
                    <td>всё тело</td>
                    <td>24900 руб</td>
                </tr>
            </table>

</body>
</html>

1

В общем, если у кого либо похожая(или даже такая-же проблема) не ставьте картинку после таблицы, а иначе будет как у меня))) Стало

HTML
<img src="leftSide. png" alt="Здесь должна быть картинка">
    <img src="rightSide.png" alt="Здесь должна быть картинка">
    <h3>ПРАЙС:</h3>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>консультация врача</td>
            <td>бесплатно</td>
        </tr>
        <tr>
            <th colspan="2">разовое посещение</th>
        </tr>
        <tr>
            <td>1 любая зона</td>
            <td>2980 руб</td>
        </tr>
        <tr>
            <td>1 дополнительная зона</td>
            <td>990 руб</td>
        </tr>
        <tr>
            <td>всё тело</td>
            <td>5980 руб</td>
        </tr>
        <tr>
            <th colspan="2">абонемент на курс</th>
        </tr>
        <tr>
            <td>1 любая зона</td>
            <td>14900 руб</td>
        </tr>
        <tr>
            <td>1 дополнительная зона</td>
            <td>890 руб</td>
        </tr>
        <tr>
            <td>всё тело</td>
            <td>24900 руб</td>
        </tr>
    </table>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

выравнивание таблицы по центру.

: TeXнические обсуждения

Сообщения без ответов | Активные темы | Избранное



 
Roxkisabsver 

 выравнивание таблицы по центру.

25.11.2015, 21:56 

26/06/13
78

Сап /dxdy. В общем тема в том, что я сделал таблицу в техе, но (по непонятным мне причинам) вся она сдвинута вправо. Отмечу, что при компиляции никаких ошибок не вылезает. Как выровнять все в середину? Есть ли простой метод с помощью какого-нибудь окружения? Скрины прилагаю:

https://yadi.sk/i/FMopRJ4ykjWfd
https://yadi.sk/i/mOxo0LXzkjWiT
https://yadi.sk/i/gneVT0lekjWj2
https://yadi.sk/i/A_jRTdJNkjWjW


   

                  

Xaositect 

 Re: выравнивание таблицы по центру.

25.11.2015, 22:03 

Заслуженный участник

06/10/08
6422

Приложите лучше исходный файл. Скорее всего, у Вас просто поля слева большие и таблица широкая.


   

                  

Karan 

 Posted automatically

25.11.2015, 22:04 

Модератор

19/10/15
1196

 i Тема перемещена из форума «Околонаучный софт» в форум «TeXнические обсуждения»


   

                  

Roxkisabsver 

 Re: выравнивание таблицы по центру.

25.11.2015, 22:35 

26/06/13
78

Xaositect
Дело в том, что в тему не прикрепить файл ((


   

                  

Xaositect 

 Re: выравнивание таблицы по центру.

25.11.2015, 22:39 

Заслуженный участник

06/10/08
6422

Файл можно скопировать и разместить в окружении syntax, например:

Код:

[syntax lang=»latex»]
\documentclass{article}
\begin{document}
\end{document}
[/syntax]

даст

\documentclass{article}
\begin{document}
\end{document}

Достаточно одной строки таблицы, она же все равно будет широкая.

Ну либо можно на тот же Яндекс. Диск положить, но лучше все-таки тут.


   

                  

Roxkisabsver 

 Re: выравнивание таблицы по центру.

25.11.2015, 22:48 

26/06/13
78

Xaositect
Простите, но я Вас не понял. У меня есть код (скриншоты с яндекса). Код — таблица. В какое окружение поставить таблицу чтоб она по середине была? \syntax ? Что это вообще и куда его в коде вставлять?


   

                  

Xaositect 

 Re: выравнивание таблицы по центру.

25.11.2015, 22:56 

Заслуженный участник

06/10/08
6422

Приведите текстом здесь на форуме. Заключите в тэг [code] или [syntax].

Просто никто не будет перенабирать себе код со скриншота, чтобы проверить предполагаемое решение или уточнить какие-то детали.

Попробуйте поиграться с размером текста, мне все-таки кажется, что Ваша таблица по ширине не влезает в Ваше textwidth.


   

                  

Roxkisabsver 

 Re: выравнивание таблицы по центру.

25.11.2015, 23:16 

26/06/13
78

Xaositect
Дам ссылку на яд:
https://yadi. sk/d/rcTPkvE5kjbqC


   

                  

Xaositect 

 Re: выравнивание таблицы по центру.

25.11.2015, 23:38 

Заслуженный участник

06/10/08
6422

В логе ясно написано: Overfull \hbox (52. 69815pt too wide) in paragraph at lines 31—155
Это значит, что таблица получается примерно на 2 сантиметра шире, чем предназначенное ей место.
Я убрал из начала определения ширины текста и полей, добавил \usepackage[left=5mm,right=5mm]{geometry} и обернул внешний tabular в \begin{center}..\end{center}, теперь все нормально.


   

                  

Roxkisabsver 

 Re: выравнивание таблицы по центру.

26.11.2015, 00:01 

26/06/13
78

Xaositect
Спасибо большое. Сделал так, как Вы и сказали. Все работает. Все на своем месте. Еще раз огромное спасибо.


   

                  

Показать сообщения за: Все сообщения1 день7 дней2 недели1 месяц3 месяца6 месяцев1 год Поле сортировки АвторВремя размещенияЗаголовокпо возрастаниюпо убыванию 
  Страница 1 из 1
 [ Сообщений: 10 ] 

Модераторы: Karan, Toucan, PAV, maxal, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:

Как центрировать содержимое таблицы HTML?

В этой статье мы покажем, как выровнять содержимое таблицы по центру. Свойство text-align в CSS можно использовать для выравнивания содержимого данного контейнера или элемента.

Подход: Чтобы выровнять содержимое таблицы по центру, мы можем использовать свойство text-align в CSS. Таблица элементов может быть оформлена с помощью свойства text-align, и значение в качестве центра приведет к желаемому решению. По умолчанию для свойства text-align установлено значение left, поэтому содержимое выравнивается по левому краю. Мы переопределим значение этого свойства на центр, чтобы выровнять содержимое в соответствии с нашим требованием.

Синтаксис: 

 выравнивание текста: по левому краю;

Значение свойства:

  • начальное значение: Это значение по умолчанию.
  • наследование: Устанавливает значение свойства родительского элемента.
  • слева: Выравнивает текст по левому краю (свойство по умолчанию).
  • справа: Выравнивает текст по правому краю.
  • center: Выравнивает текст по центру.
  • по ширине: Растягивает содержимое элемента.

Пример 1: Сначала мы создадим шаблон HTML с элементом таблицы и добавим данные в строки и столбцы таблицы.

HTML

< html lang = "en" >

 

< head >

< Meta Charset = "UTF-8" >

< . < Стиль >

Таблица,

TD,

.0056 th {

             граница: сплошная 1 пиксель;

             заполнение: 20 пикселей;

         }

     style >

head >

 

< body >

< table >

         < tr >

             < th >Countries th >

             < th >Код th >

             < th >Континент0055 th >

         tr >

         < tr >

             < td >United States of America< / TD >

< TD > USA TD >

0054              < td >North America td >

         tr >

         < tr >

< TD > Индия TD >

< td >IND td >

             < td >Asia td >

         tr >

< TR >

< TD > Китай TD > Китай TD > Китай TD > Китай TD > Китай TD > Китай . 0056 >

             < td >CHN td >

             < td >Asia td >

TR >

< TR >

< td >Russian Federation td >

             < td >RUS td >

             < TD > ASIA TD >

TR >

0056 < TR >

< TD > United Kingdom TD >

955955955955955959595959595959595959595959595005005005005. TD >

< TD > Европа TD >

tr >

         < tr >

             < td >France td >

             < TD > FRA TD >

< TD > Европа < TD > Европа.0056 td >

         tr >

     table >

body >

 

html >

Вывод:

   

Таблица выровнена по левому краю ячейки по умолчанию. Мы применили некоторые основные стили, такие как границы и отступы, чтобы сделать таблицу более наглядной. Эти стили, такие как граница, были установлены для визуализации выравнивания с границей, а также для добавления дополнительных отступов для масштабирования в табличном представлении и возможности лучше видеть свойство выравнивания.

Выравнивание содержимого по центру: Теперь, когда мы добавили содержимое таблицы, мы можем добавить свойство CSS для выравнивания содержимого таблицы по центру. Мы можем использовать элемент table и добавить свойство text-align, установив его по центру. Вы должны добавить следующий код в тег стиля, как показано ниже: