Есть ли способ центрировать элемент в середине макета

ProgramBox

Есть ли способ центрировать элемент в середине макета

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь центрировать элемент в середине макета, а также, по возможности, иметь возможность контролировать его положение, если потребуется, с помощью незначительных настроек css. На моей странице макета я не могу понять, почему элемент, который я хочу разместить в середине экрана как по горизонтали, так и по вертикали, расположен слева от экрана. Я знаю, что проблема в чем-то в моем макете, я просто не могу понять, в чем проблема. Ниже приведена базовая версия моего макета с элементом, который я могу попытаться центрировать.

 * {
    margin: 0;
    padding: 0;
}

html, body {
    width:100%;
    height:100%;
    margin:0;
}

.layoutPage {
    min-height: 95%;
}

/***********************************
 ************Header*****************
 ***********************************/

.headerImage {
    background: blue;
    padding: 1.75em;
    margin: 0;
    padding: 0;
    background-color: blue;
    height: 3.5em; /*4em*/
}

/***********************************
 ***************Body****************
 ***********************************/

.bodyContainer {
    overflow: auto;
    padding-bottom: 1em;
    font-family: Verdana;
    font-size: 12px; /*12px*/
}

.appRoundedShadow {
display: inline-block;
height: auto

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="layoutPage">
        <div class="headerImage">            
        </div>
        <br />
        <div class="bodyContainer">
            <div class="appRoundedShadow">
		<div class="container">
			<div style="width: 450px; margin: 0 auto; border: 1px solid;">

                    <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
                        <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
                    </div>
                    <div style="margin: 1em">
                        <span style=""><input type="text" name="year"><br></span>

                        <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
                    </div>
                    
                    
                    <div style="margin-left: 1em">
                        <p>It may take 2 or more minutes to complete your request.<br/></p>
                    </div>

                </div>
		</div>
	</div>
        </div>
    </div>
    <div class="footer">
        <hr />
        <span class="footerText">Copyright © </span>
    </div>
</body>
</html>

Я хочу центрировать весь appRoundedShadow div

1. Немного неясно, какой элемент вы пытаетесь центрировать. Это весь .appRoundedShadow div или какой-то другой компонент? Иногда вертикальное центрирование является сложной задачей. Я обнаружил, что flexbox полезен в аналогичных обстоятельствах.

2. весь раздел appRoundedShadow

Ответ №1:

Здесь вам нужно сделать пару вещей. Во-первых, удалите тот, <br> который в данный момент находится под .headerImage div, потому что это добавляет дополнительное пространство, из-за которого .headerImage кажется, что он не центрирован по вертикали.

Затем добавьте следующее для .appRoundedShadow :

 .appRoundedShadow {
    display: block;
    height: auto;
    margin: auto;
}

Затем сделайте отступы согласованными вокруг .bodyContainer (замените это на padding-bottom на padding ).

Наконец, удалите min-height на .layoutPage . Вместо этого пусть содержимое div определяет высоту.

 * {
    margin: 0;
    padding: 0;
}

html, body {
    width:100%;
    height:100%;
    margin:0;
}

/***********************************
 ************Header*****************
 ***********************************/

.headerImage {
    background: blue;
    padding: 1.75em;
    margin: 0;
    padding: 0;
    background-color: blue;
    height: 3.5em; /*4em*/
}

/***********************************
 ***************Body****************
 ***********************************/

.bodyContainer {
    overflow: auto;
    padding: 1em;
    font-family: Verdana;
    font-size: 12px; /*12px*/
    position: relative;
}

.appRoundedShadow {
    display: block;
    height: auto;
    margin: auto;
}

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="layoutPage">
        <div class="headerImage">            
        </div>
        <div class="bodyContainer">
            <div class="appRoundedShadow">
		<div class="container">
			<div style="width: 450px; margin: 0 auto; border: 1px solid;">

                    <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
                        <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
                    </div>
                    <div style="margin: 1em">
                        <span style=""><input type="text" name="year"><br></span>

                        <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
                    </div>
                    
                    
                    <div style="margin-left: 1em">
                        <p>It may take 2 or more minutes to complete your request.<br/></p>
                    </div>

                </div>
		</div>
	</div>
        </div>
    </div>
    <div class="footer">
        <hr />
        <span class="footerText">Copyright © </span>
    </div>
</body>
</html>

Ответ №2:

Для центрирования вашего отчета добавьте этот стиль…

 .bodyContainer {
    text-align: center;
}

Ответ №3:

Вы можете указать элементу, который хотите центрировать, ‘дисплей: блок’ и ‘поле: авто’

 * {
    margin: 0;
    padding: 0;
}

html, body {
    width:100%;
    height:100%;
    margin:0;
}

.layoutPage {
    min-height: 95%;
}

/***********************************
 ************Header*****************
 ***********************************/

.headerImage {
    background: blue;
    padding: 1.75em;
    margin: 0;
    padding: 0;
    background-color: blue;
    height: 3.5em; /*4em*/
}

/***********************************
 ***************Body****************
 ***********************************/

.bodyContainer {
    overflow: auto;
    padding-bottom: 1em;
    font-family: Verdana;
    font-size: 12px; /*12px*/
}

.appRoundedShadow {
  display: block;
  height: auto;
  margin:auto;
}

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="layoutPage">
        <div class="headerImage">            
        </div>
        <br />
        <div class="bodyContainer">
            <div class="appRoundedShadow">
		<div class="container">
			<div style="width: 450px; margin: 0 auto; border: 1px solid;">

                    <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
                        <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
                    </div>
                    <div style="margin: 1em">
                        <span style=""><input type="text" name="year"><br></span>

                        <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
                    </div>
                    
                    
                    <div style="margin-left: 1em">
                        <p>It may take 2 or more minutes to complete your request.<br/></p>
                    </div>

                </div>
		</div>
	</div>
        </div>
    </div>
    <div class="footer">
        <hr />
        <span class="footerText">Copyright © </span>
    </div>
</body>
</html>

1. Это просто центрирует его по горизонтали, а не по вертикали. Он также удалил мою округлую тень.

2. Вы должны быть мне более конкретными с тем, чего именно вы хотите достичь. Возможно, это поможет вам достичь желаемого howtocenterincss.com 🙂

Ответ №4:

display: inline-block Отключите .appRoundedShadow , и все готово.