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

140
04 сентября 2019, 18:40

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

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 id="price-list-header">
    <h1>Выберите интересующую вас зону эпиляции</h1>
</div>
    <hr color="#965376" size="10px" width="88%" style="border-radius: 10px;">
    <div id="priceListText">
        <p>
            Пройдите процедуру лазерной эпиляции в нашем центре косметологии<br>
            и лазерной эпиляции ДОШИ насладитесь прикосновениями<br>
            к своему гладкому и приятному телу
        </p>
    </div>
    <div id="priceList">
        <img src="leftSide.png" alt="Здесь должна быть картинка" id="leftSideImg">
        <h2>ПРАЙС:</h2>
            <table id="priceListTable" border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <td>консультация врача</td>
                    <td class="price">бесплатно</td>
                </tr>
                <tr>
                    <th colspan="2">разовое посещение</th>
                </tr>
                <tr>
                    <td>1 любая зона</td>
                    <td class="price">2980 руб</td>
                </tr>
                <tr>
                    <td>1 дополнительная зона</td>
                    <td class="price">990 руб</td>
                </tr>
                <tr>
                    <td>всё тело</td>
                    <td class="price">5980 руб</td>
                </tr>
                <tr>
                    <th colspan="2">абонемент на курс</th>
                </tr>
                <tr>
                    <td>1 любая зона</td>
                    <td class="price">14900 руб</td>
                </tr>
                <tr>
                    <td>1 дополнительная зона</td>
                    <td class="price">890 руб</td>
                </tr>
                <tr>
                    <td>всё тело</td>
                    <td class="price">24900 руб</td>
                </tr>
            </table>
        <img src="rightSide.png" alt="Здесь должна быть картинка" id="rightSideImg">
    </div>
</body>
</html>

CSS:

#price-list-header h1{
    font-size: 36px;
    text-align:center;
    color: #EB5674;
}
#priceListText{
    text-align: center;
    font-size: 28px;
    color: #4B494C;
}
#priceList{
}
#priceList h2{
    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;
}

Answer 1

#price-list-header h1{ 
    font-size: 36px; 
    text-align:center; 
    color: #EB5674; 
} 
 
#priceListText{ 
 
    text-align: center; 
    font-size: 28px; 
    color: #4B494C; 
} 
 
#priceList{ 
 
} 
 
#priceList h2{ 
    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 id="price-list-header"> 
    <h1>Выберите интересующую вас зону эпиляции</h1> 
</div> 
    <hr color="#965376" size="10px" width="88%" style="border-radius: 10px;"> 
    <div id="priceListText"> 
        <p> 
            Пройдите процедуру лазерной эпиляции в нашем центре косметологии<br> 
            и лазерной эпиляции ДОШИ насладитесь прикосновениями<br> 
            к своему гладкому и приятному телу 
        </p> 
    </div> 
 
    <div id="priceList"> 
        <img src="leftSide.png" alt="Здесь должна быть картинка" id="leftSideImg"> 
        <img src="rightSide.png" alt="Здесь должна быть картинка" id="rightSideImg"> 
            <h2>ПРАЙС:</h2> 
            <table id="priceListTable" border="1" cellspacing="0" cellpadding="0"> 
                <tr> 
                    <td>консультация врача</td> 
                    <td class="price">бесплатно</td> 
                </tr> 
                <tr> 
                    <th colspan="2">разовое посещение</th> 
                </tr> 
                <tr> 
                    <td>1 любая зона</td> 
                    <td class="price">2980 руб</td> 
                </tr> 
                <tr> 
                    <td>1 дополнительная зона</td> 
                    <td class="price">990 руб</td> 
                </tr> 
                <tr> 
                    <td>всё тело</td> 
                    <td class="price">5980 руб</td> 
                </tr> 
                <tr> 
                    <th colspan="2">абонемент на курс</th> 
                </tr> 
                <tr> 
                    <td>1 любая зона</td> 
                    <td class="price">14900 руб</td> 
                </tr> 
                <tr> 
                    <td>1 дополнительная зона</td> 
                    <td class="price">890 руб</td> 
                </tr> 
                <tr> 
                    <td>всё тело</td> 
                    <td class="price">24900 руб</td> 
                </tr> 
            </table> 
 
</body> 
</html>

Answer 2

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

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

Как спрятать последний ul внутри ul

Есть список категорий, вложенность которого может достигать до 10 категорий Возможно ли с помощью css скрыть последний ul внутри первого ul

 94
Не отображается CSS код
CSS

Не отображается CSS код

попытался сверстать header для макета и столкнулся с проблемой, что в моем css коде, а именно вbtn не хочет работать padding и border-radius, как только эти...

 128
JS аудиоплеер: баг в андроид
javascript

JS аудиоплеер: баг в андроид

 109
Как сделать клик по кнопке если разрешение экрана меньше 1600px
javascript

Как сделать клик по кнопке если разрешение экрана меньше 1600px

Как сделать клик по кнопке, если разрешение экрана по ширине меньше 1600px?

 136