No matter what I try, this image refuses to align to the center

Question

What the page should look like (Ignore the div highlighting, its structure is not being used)

No matter what or how I try, the "Read More" image (line 61) refuses to center horizontally AND responsively. As in, it's responding to pixel measurements, but not % measurements.

I've looked at around 15 articles by now, and I can't afford to spend any more time fruitlessly. Does anyone have a solution to the fact that the Read More image refuses to center? It should be responsive too. The only reason I can think of as to why it's not centering is because of bootstrap, but I doubt that.

The image is currently in a link tag inside a div that class="read-more". The image seems to ignore the margin-left and margin-right properties entirely.

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

`padding: auto` is not valid by the way. – Eria Mar 23 '16 at 13:59 — Eria, Mar 23 '16 at 13:59

Scott Marcus · Answer 1 · 2016-03-23T13:58:11.423

2

An image should not be centered using the approach you are using. Simply add:

 text-align:center;

To the block level container element's CSS rule (not the image's CSS rule).

Text alignment is an inherited CSS property and you use it by applying it to the parent BLOCK LEVEL element (container) of the element that needs alignment. In your case, since you have the image inside of a div, the CSS rule should be applied to the div.

edited Mar 23 '16 at 13:58

answered Mar 23 '16 at 13:55

Scott Marcus

64,069
6
49
71

1

A bit low to answer. But I would have answered the same. `margin: auto` can be used to center block elements. For inline or inline-block elements, use `text-align: center` on the container. – Eria Mar 23 '16 at 13:57

score 0 · Answer 2 · answered Mar 23 '16 at 14:04

0

A width of 100% for the container and text-align:center should do:

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

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

Updated codepen: http://codepen.io/anon/pen/EKmmMZ

answered Mar 23 '16 at 14:04

VirginieLGB

548
2
15

score 0 · Answer 3 · answered Mar 23 '16 at 14:04

0

You can apply text-align: center to read-more div to make image to center. Make Sure that the link and image must not have float property used.

answered Mar 23 '16 at 14:04

user3770777

76
5

Jon Underwood · Answer 4 · 2016-03-23T14:19:07.720

0

You need to alter the css line 42 to this

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

edited Mar 23 '16 at 14:19

answered Mar 23 '16 at 14:09

Jon Underwood

1
2

score 0 · Answer 5 · answered Mar 23 '16 at 14:19

Here is the code you exactly need.

Updated 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>

score 0 · Answer 6 · answered Mar 23 '16 at 14:51

0

Please use "margin" property to bring it center.It will align the image in order of -Top,Right,Bottom and Left.

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

answered Mar 23 '16 at 14:51

Rahul Kumar

1
1

score 0 · Answer 7 · answered Feb 06 '23 at 14:23

0

try this perhaps

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

or any value of percentage that you'd like

answered Feb 06 '23 at 14:23

staticoly

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 08 '23 at 13:27

No matter what I try, this image refuses to align to the center

7 Answers7