What the page should look like（忽略div高亮显示，其结构未被使用）
无论我尝试什么或如何尝试，＆＃34;阅读更多＆＃34;图像（第61行）拒绝水平和响应地居中。如同，它响应像素测量，但不是％测量。
我现在看了大约15篇文章，而且我无法再花费更多的时间。有没有人能够解决Read More图像拒绝居中的事实？它应该也是响应。我能想到为什么它没有居中的唯一原因是因为引导，但我怀疑。
图片当前位于div中的一个链接标记中，类=＆＃34; read-more＆＃34;。图像似乎完全忽略了margin-left和margin-right属性。
.read-more img{
display:inline-block;
padding-left:auto;
margin-right:auto;
height:10%;
width:20%;
}
答案 0 :(得分：2)
不应使用您使用的方法对图像进行居中。只需添加：
text-align:center;
到块级容器元素的 CSS规则（不是图像的CSS规则）。
文本对齐是一个继承的CSS属性，您可以通过将其应用于需要对齐的元素的父 BLOCK LEVEL 元素（容器）来使用它。在您的情况下，由于您的图像位于div内，因此CSS规则应该应用于div。
答案 1 :(得分：0)
容器和text-align：center的宽度应为100％：
.read-more img {
height: 10%;
width: 20%;
}
.read-more {
width: 100%;
text-align: center;
}
更新了codepen：http://codepen.io/anon/pen/EKmmMZ
答案 2 :(得分：0)
您可以将text-align：center应用于read-more div以使图像居中。确保链接和图像不得使用浮动属性。
答案 3 :(得分：0)
您需要将css行42更改为此
.read-more {
text-align: center;
}
答案 4 :(得分：0)
以下是您确切需要的代码。
更新了codepen：http://codepen.io/anuragscsit/pen/YqVVmv
body {
background-image: url("graphics/Website_background_2,_100_dpi.jpg");
}
body a {
color: rgb(241, 90, 34);
}
body a:hover {
color: rgb(208, 78, 29);
}
body a:visited {
color: rgb(144, 14, 0);
}
.row {
overflow: hidden;
}
[class*="xs-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color: rgba(255, 255, 255, 0.8);
padding-top: 40px;
}
.row1-imgs img {
height: 60%;
width: 100%;
/*box-shadow: inset 5px 5px 7px rgb(0,256,0);/*the line that breaks .border-blue and .border-orange shadows*/
}
.read-more{text-align:center;}
.read-more img {
display: inline-block;
padding-left: auto;
margin-right: auto;
height: 10%;
width: 20%;
}
.read-more div {
background-color: green;
margin-left: 20px;
}
.row1 p {
text-align: justify;
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
.row2 {
text-align: center;
}
#row3 img {
height: 60%;
width: 100%;
}
[class*="title-"] {
text-shadow: 4px 4px 5px rgb(63, 63, 63);
font-weight: bold;
color: white;
font-family: Serif;
letter-spacing: 2px;
font-size: 130%;
text-align: center;
}
.title-blue,
.blue-border,
.title-orange,
.orange-border {
box-shadow: 5px 5px 7px rgb(117, 117, 117);
}
.title-blue {
background-color: rgb(0, 102, 179);
}
.title-orange {
background-color: rgb(208, 78, 29);
}
.blue-border {
border: 4px solid rgb(0, 102, 179);
}
.orange-border {
border: 4px solid rgb(208, 78, 29);
}
#post1 {
width: 85%;
margin-left: auto;
margin-right: auto;
}
#post1 p {
text-align: justify;
}
#post2 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.event {
padding-top: 3%;
}
.event p {
font-size: 110%;
}
.eventitle {
font-size: 120%;
font-weight: bold;
}
#post1 .eventitle {
color: rgb(0, 102, 179);
}
#post2 .eventitle {
color: rgb(208, 78, 29);
}
* {
/*border: 1px dotted green;*/
}
/*line 13-21 taken from http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
*/<html lang="en">
<head>
<link rel="stylesheet" href="front.css" />
<meta name="" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="icon" href="graphics/Liger head for website masthead.ico" />
<title>Ligerbots</title>
</head>
<body>
<header>
</header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display...Ross you decide whether this is important or not -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://sonexdjco.com/" target="_blank">
<img id="brand-image" src="img/bg9.png" alt="Check us out!">
</a>
</div>
<!-- Collect the nav links-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://www.google.com/maps/dir//MONROE+Restaurant,+450+Massachusetts+Avenue,+Cambridge,+MA+02139/@42.3751756,-71.1304011,10.44z/data=!4m9!4m8!1m0!1m5!1m1!1s0x89e37754659a60b7:0xdf11b00d94f15ff9!2m2!1d-71.1012446!2d42.36351!3e0?hl=en-US"
target="_blank">Get Directions!<span class="sr-only">(current)</span></a></li>
<li><a href="https://sonexdjco.yapsody.com/event/index/34100/spring-fever" target=_blank>Buy Tickets!</a></li>
<li><a href="#overview" class="page-scroll">Overview</a></li>
<li><a href="#springfeverlinks" class="page-scroll">Links</a></li>
<li><a href="#map" class="page-scroll">Map</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div style="background-color:rgba(255,255,255,0.8)" class="col-xs-5 col-xs-offset-1">
<div>
<div class="row1">
<div class="title-orange">
LIGERBUILD BLOG
</div>
<span class="row1-imgs"><img class="orange-border" src="graphics/row1col1.gif"/></span>
<p>Work has already begun on the chassis for the 2016 Stronghold robot. Five working groups are preparing the team to hit the ground running on January 9. We have students working on mechanical, electrical, programming and several fixing the road
kill. . . .</p>
</div>
<div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="row1">
<div class="title-blue">
LIGERBUISNESS BLOG
</div>
<span class="row1-imgs"><img class="blue-border" src="graphics/row1col2.jpg"/></span>
<p>FRC alumnus Ian from Dash Electric visited with his awesome electric longboard in December and told us how he started his company. Students got to ride his board and ask him lots of questions. <a>Read and see more. . .</a></p>
</div>
</div>
</div>
</div>
<div class="read-more">
<a href="http://ligerbots.org"><img src="graphics/Read_more_button_outlines.gif" /></a>
</div>
<div class="row">
<div style="background-color:rgba(255,255,255,0.8);" class="col-xs-5 col-xs-offset-1">
<div class="row2">
<div class="title-blue">
ANNOUNCMENTS
</div>
<div style="background-color:rgba(255,255,255,0.8)" class="blue-border">
<div id="post1">
<div class="event">
<span class="eventitle">Team Dinners Needed During Build</span>
<p>Please sign up to make team dinners during build season. We eat together as a team on Friday nights at 6:00. Several families can do this together. Please see the signup <a href="file:///C:/Users/guymi_000/Desktop/Frontpage/test.html">here.</a>
</div>
<div class="event">
<span class="eventitle">Carpool Drivers Needed</span>
<p>Please sign up to drive carpools from North to South and back, Mondays through Saturdays during build season. Please see details on our carpool page, <a href="http://ligerbots.org">here.</a></p>
</div>
<div class="event">
<span class="eventitle">STIMMS Signup Required</span>
<p>All Students must sign up on STIMMS or theey will not be able to attend competitions. Please see details <a href="http://ligerbots.org">here.</a></p>
</div>
<div class="event">
<span class="eventitle">No Team Meeting 12/24</span>
<p>There will be no team meeting 12/24 due to Christmas. Team meetings will resume on 1/4/16.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="row2">
<div class="title-orange">
UPCOMING EVENTS
</div>
<div style="background-color:rgba(255,255,255,0.8)" class="orange-border">
<div id="post2">
<div class="event">
<span class="eventitle">Visit the Waban Cub Scouts</span>
<p>January 13, 2016, 7-8 p.m.<br/> Waban Library Center</p>
</div>
<div class="event">
<span class="eventitle">Visit to Danger Awesome!</span>
<p>January 23, 2016, 4-6 p.m.<br/> 215 Ranham St. Melrose, MA</p>
</div>
<div class="event">
<span class="eventitle">Whole Foods Fundraiser</span>
<p>Feb. 1-28 10 a.m.-10 p.m.<br/> Whole Foods, Newton Four Corners</p>
</div>
<div class="event">
<span class="eventitle">FRC Competition at WPI</span>
<p>March 11-12, 2016, 9 a.m.-5 p.m.<br/> Worcester Polytechnic Institute<br/> Link to FIRST Livestream <a href="file:///C:/Users/guymi_000/Desktop/Frontpage/test.html">here</a></p>
</div>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="row3">
<div class="blue-border">
<img src="graphics/row3col1.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
答案 5 :(得分：0)
请使用＆＃34; margin＆＃34;使它成为中心的属性。它将按照从顶部，右侧，底部和左侧的顺序对齐图像。
.read-more img {
display: inline-block;
float:center;
padding-left: auto;
margin: 0 0 0 40%;
height: 10%;
width: 20%;
}