See page (front.html)
Codepen
What the page should look like（忽略突出显示的div，未使用其结构）
无论我怎么试，“阅读更多”的图片（第61行）都拒绝水平居中，也不响应，比如，它响应的是像素测量，而不是%测量。
到目前为止，我已经看了大约15篇文章，我不能再浪费时间了。有人能解决阅读更多图片无法居中的问题吗？它应该也能响应。我能想到的唯一原因是它无法居中是因为 Bootstrap ，但我对此表示怀疑。
该图像当前位于class=“read-more”的div内的link标记中。该图像似乎完全忽略了margin-left和margin-right属性。

.read-more img{
display:inline-block;
padding-left:auto;
margin-right:auto;
height:10%;
width:20%;
}

这是你真正需要的代码。
更新代码：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>

7条答案

按热度按时间

a14dhokn1#

图像不应使用您正在使用的方法居中。只需添加：

text-align:center;

到块级别容器元素的CSS规则（不是图像的CSS规则）。
文本对齐是一个继承的CSS属性，您可以通过将其应用于需要对齐的元素的父BLOCK LEVEL元素（容器）来使用它。在您的情况下，由于您在div中有图像，因此CSS规则应该应用于div。

赞(0）回复(0）举报 2023-02-10

68de4m5k2#

容器的宽度为100%，text-align：center应该：

.read-more img {
  height: 10%;
  width: 20%;
}

.read-more {
  width: 100%;
  text-align: center;
}

更新代码：http://codepen.io/anon/pen/EKmmMZ

46qrfjad3#

您可以应用文本对齐：center to read-more div to make image to center.确保链接和图像没有使用float属性。

a8jjtwal4#

p4tfgftt5#

您需要将css第42行更改为

.read-more  {
  text-align: center;
}

gjmwrych6#

请使用“margin”属性使其居中。它将按-上、右、下和左的顺序对齐图像。

.read-more img {
  display: inline-block;
  float:center;
  padding-left: auto;
  margin: 0 0 0 40%;
  height: 10%;
  width: 20%;
}

xlpyo6sf7#

也许试试这个

.read-more {
margin: 0 20% 0 20%;
}

或者任何你想要的百分比值

css 无论我怎么努力，这个图像都无法与中心对齐

7条答案

相关问题

热门标签

最新问答