how to centre these 2 images

[rudy_11]

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

[osgood_]

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_11]

Thank you soo much.

Sent from my Samsung Galaxy smartphone.

[Nancy OShea]

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>

[rudy_11]

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

Sent from my Samsung Galaxy smartphone.

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

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>

Is it a navigation? Just looks like a couple of centered images to me, logos or something - 206px is a bit wide for a nav tab aint it?

[Nancy OShea]

I surmised this from the image file names -- home and contact. 

200_size_buttons/red_home_flat.jpg

200_size_buttons/red_contact_flat.jpg

Regardless, raster images especially small ones are very hard to read and they can't be translated.

If it's a genuine icon they are after, they should be using SVG, Font Awesome or Glyphiocns.

Raster images are for photos.

Nancy

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

I surmised this from the image file names -- home and contact. 

200_size_buttons/red_home_flat.jpg

200_size_buttons/red_contact_flat.jpg

Regardless, raster images especially small ones are very hard to read and they can't be translated.

If it's a genuine icon they are after, they should be using SVG, Font Awesome or Glyphiocns.

Raster images are for photos.

Nancy

The names reflect navigation buttons. If so images are not really the best option. I did'nt see any anchor tags so just assumed they were a couple of images of some nature, needing to be centered.