有没有一种方法可以将项目居中放置在布局中间

时间：2019-03-08 21:01:31

标签： 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居中

4 个答案:

答案 0 :(得分：0)

要使您的报告居中，请添加此样式... 

.bodyContainer {
    text-align: center;
}

答案 1 :(得分：0)

您可以将想要居中的元素设置为'display：block'和'margin：auto'

* {
    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>

答案 2 :(得分：0)

从display: inline-block中退出.appRoundedShadow，您就完成了。

答案 3 :(得分：0)

您必须在这里做几件事。首先，删除当前位于<br> div下方的.headerImage，因为它增加了额外的空间，使.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>

相关问题
最新问题