我正在制作我的第一个网页,并且拥有所需的元素-我似乎无法使它们集中在页面上。我已经尝试过margin:自动,text-align:居中以及其他很多东西。没事。
我希望页面末尾的页眉,图像和按钮成为页面中央的脊柱。任何建议,将不胜感激。
谢谢
这是我的代码:
HTML:
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday"> </a>
</div>
</div>
的CSS
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
align: center;
padding-left: 40px;
padding-right: 40px;
float: center;
max width: 100%;
text-align: center;
marrgin: 0 auto;
float: center;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-responsive {
margin: 0 auto;}
.img-resize {
max-width: 400px;
max-height: auto;}
最佳答案
您需要添加容器text-align
<div class="container" style="text-align: center;">
包裹元素的div负责对齐元素。
关于html - 文字和图像不会在我的页面上居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46999638/