Skip to main content
johns45317965
johns45317965
Known Participant
June 25, 2018
Answered

Moving image to center just isn't happening...

  • June 25, 2018
  • 1 reply
  • 2476 views

I'm working with a Bootstrap template that has worked well in almost everything up until now. In a section referred to as the "Team" section there are 4 images and I want to reduce that to ONE single image for this domain. That one image I want in the CENTER. Pretty simple. However I've spend hours trying every way possible to do it and i just can't figure it out. I learned on how Bootstrap 4 does not have center-block so I went to trying the d-block m-x-auto but that didn't work. The image moves a tad towards the center but not much at all.

I don't like messing around with a template's style-css much but I toyed with that particular section's (the "Team" section; see image) to adjust the css. I was again able to get it to move slightly but hardly at all. I almost want to give up

Here's the main css section  for the image I'm playing with:

#team .member .pic img {

  max-width: 100%;

}

And here are some adjustments I read would work, tried, but failed:

#team .member .pic img {

    display: block;

    margin-left: auto;

    margin-right: auto;

                max-width: 75%;

  }

----------------------------------------------------------

#team .member .pic img {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow:hidden;

}

--------------------------------------------------------------------

#team .member .pic img {

vertical-align: middle;

    horizontal-align: middle;

                max-width: 75%;

]

________________________________________-

#team .member .pic img {

margin: auto;

    width: 80%;

    padding: 10px;

}

_____________________________________________

So I tried them all. I de-sized the image because I read that it may not work at 100% size when trying to move to center. But still none were able to centralize the image I wanted in that section for this template. Any suggestions I'm all ears.

And here is a simple, basic attempt of me making a simple text-align: center; addition to the css which - according to the "Properties" claims (circled on the right) the image should be in the center - but it's not.

image - can

This topic has been closed for replies.
Correct answer BenPleysier

I am not sure why it should be that hard.

<div class="container">

  <div class="row">

    <div class="col-md-8 text-center member">

      <img class="img-fluid pic" src="img/team-1.jpg" alt="Michael">

      <h4>Michael Kolecky</h4>

      Chief Executive Officer

      <div class="social">

      </div>

    </div>

  </div> 

</div>

Although an image is an inline-block element, it is being followed by a block element (h4) which will automatically create its own line. Therefore the image, being the only element on that line, will be centred as specified in the column container.

To illustrate what I mean, if you were to place text (no block elements) after the image, both, the image + the text would be centred.

You may have noticed that I removed the span element surround Chief Executive Officer. This has no effect unless you wish to style the text. I also removed the element with a class of member and placed the class in the column container.

To learn more about elements, Google the subject or go to HTML Block and Inline Elements

In case you do want some text (inline) after the image you could have a look at changing the image to a block level element and centring it that way as per

<div class="container">

  <div class="row">

    <div class="col-md-8 text-center member">

      <img class="img-fluid d-block mx-auto pic" src="img/team-1.jpg" alt="Michael">

      Michael

      <h4>Michael Kolecky</h4>

      Chief Executive Officer

      <div class="social">

      </div>

    </div>

  </div> 

</div>

I hope this helps

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 25, 2018

Which version of Bootstrap?  Version 3 uses floats while version 4 uses flexbox.  You cannot mix BS3 with BS4.

Below is a centered div and image with BS4.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Starter</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<!--main content-->
<main class="container">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<img class="img-fluid" src="https://dummyimage.com/400x350" alt="logo">
</div>
</div>
</main>
<!--latest jQuery Core--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Popper JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<!--latest Bootstrap 4 JS--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
</body>
</html>
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 25, 2018

Below is with Bootstrap 3.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7 Starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Bootstrap 3 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.display-block {float:none}
</style>
</head>
<body>
<main class="container">
<div class="row">
<div class="col-md-8 display-block text-center">
<h1>Hello World!</h1>
<h2 class="text-info">Centered with Bootstrap 3</h2>
<img class="img-reponsive" src="https://dummyimage.com/400x350" alt="logo">
</div>
</div>
</main>
<!--latest jQuery 3--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Bootstrap 3 JS--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices