Skip to main content
Participant
February 27, 2017
Question

how to centre these 2 images

  • February 27, 2017
  • 2 replies
  • 559 views

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-4"><img src="file:///C|/Users/Mary/Desktop/tmg_website/images/200_size_buttons/red_home_flat.jpg" width="206" height="35" alt=""/></div>

    <div class="col-sm-4"><img src="file:///C|/Users/Mary/Desktop/tmg_website/images/200_size_buttons/red_contact_flat.jpg" width="206" height="35" alt=""/></div>

can someone please type the whole class / code for centring these two images on my page. Many thanks. Regards Mary.

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Community Expert
February 27, 2017

Since you're using Bootstrap, I wonder why you're not using Bootstrap for your navigation.

Image based navigation is a pain in the neck to maintain.   See link below for details.

Bootstrap Navigation Bar

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <ul class="nav navbar-nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
     </ul>
     <button class="btn btn-danger navbar-btn">Button</button>
   </div>
</nav>

Nancy O'Shea— Product User & Community Expert
rudy_11Author
Participant
February 27, 2017

Thank u soo much Nancy. I will look into this tomorrow.

Sent from my Samsung Galaxy smartphone.

Legend
February 27, 2017

You dont really need Bootstrap to do that. Just use the code below: (make sure the links to your images are correct)

<figure class="center-images">

<img src="images/200_size_buttons/red_home_flat.jpg" width="206" height="35" alt=""/>

<img src="images/200_size_buttons/red_contact_flat.jpg" width="206" height="35" alt=""/>

</figure>

<!-- end center-images -->

and the css:

.center-images {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

.center-images img {

margin: 0 10px;

}

rudy_11Author
Participant
February 27, 2017

Thank you soo much.

Sent from my Samsung Galaxy smartphone.