htmlcsstwitter-bootstraplayout

Bootstrap 3 - Section - How to Center Images

Would love to know how to make my images centered not floating to the left. I tried modifying the float attributes but things just go messy. Help please! I'm using section tags no grid thingy whatsoever.

When I set the float to "none" this happens

enter image description here

#hover {
  color: rgba(188, 175, 204, 0.9); 
}

h2#testimonials {
  color: #E72635;
}

div#all {
  width: 100%;
  height: 100%;
}

/* generic css */
.view {
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 0px 20px 0px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}


/*2*/

.view-second img {  
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
}
.view-second .mask { 
    background-color: rgba(12, 19, 27, 0.6); 
    width: 400px;
    padding: 105px;
    height: 450px;
    opacity: 0;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    background: transparent;
    margin: 20px 40px 0px 40px;
    opacity: 0;
    color: #8F1925;
    transform: scale(0);
    transition: all 0.5s linear 0s;
}
.view-second p { 
    transform: scale(0);
    transition: all 0.5s linear 0s;
}
.view-second a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

/* */

.view-second:hover .mask { 
    opacity:1; 
    transform: translate(-80px, -125px) rotate(45deg);
    -webkit-transform: translate(-80px, -125px) rotate(45deg);
}                             


.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info{ 
    transform: scale(1);
    opacity: 3;
}

img#articlePic {
    height: 200px;
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>The University Digest</title>
        <link rel="shortcut icon" href="img/logo1.png" />
        <!-- Bootstrap Core CSS -->
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/template.css" rel="stylesheet">
        <link href="css/indexObjects.css" rel="stylesheet">
        <!-- Fonts -->
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    </head>

    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
        <!-- Header Container -->
        <div class="container-full" id="headerC">
            <header class="masthead">
                  <p id="headerP">The University Digest</p>
                  <p id="subheader">The Official Student Publication of Western Mindanao State University</p>
            </header>
        </div>

        <!-- Navigation -->
        <div id="nav">
        
        <!--  Content Layout -->
        <!-- Portfolio Grid Section -->
        <section id="portfolio" class="bg-light-gray">
            <div class="container">
                <div class="rows">
                    <div class="col-lg-12">
                        <h2 class="section-heading">Articles</h2>
                    </div>
                    <div id="all">
                    <div class="view view-second">
                          <img src="https://i.sstatic.net/M6U3Oodp.png"  class="img-responsive img-full" alt="" id="articlePic"  />
                            <div class="mask"></div>
                            <div class="content">
                                <h2 id="testimonials">Testimonials</h2>
                                <p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
                                <a href="#" class="info">Read More</a>
                            </div>
                        </div>  
    
                        
                    <div class="view view-second">
                          <img src="https://scontent-a-sea.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/s720x720/1901663_700339420055705_5885873089628748542_n.jpg?oh=7b7b915118cd985891cb8c9ae1fb22af&oe=550C2E8D"  class="img-responsive" alt="" id="articlePic" />
                            <div class="mask"></div>
                            <div class="content">
                                <h2 id="testimonials">Testimonials</h2>
                                <p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
                                <a href="#" class="info">Read More</a>
                            </div>
                    </div>  

                    <div class="view view-second">
                          <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" id="articlePic" />
                            <div class="mask"></div>
                            <div class="content">
                                <h2 id="testimonials">Testimonials</h2>
                                <p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
                                <a href="#" class="info">Read More</a>
                            </div>
                    </div>  

                    <div class="view view-second">
                          <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" id="articlePic"/>
                            <div class="mask"></div>
                            <div class="content">
                                <h2 id="testimonials">Testimonials</h2>
                                <p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
                                <a href="#" class="info">Read More</a>
                            </div>
                    </div>  

                    <div class="view view-second">
                          <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" id="articlePic"/>
                            <div class="mask"></div>
                            <div class="content">
                                <h2 id="testimonials">Testimonials</h2>
                                <p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
                                <a href="#" class="info">Read More</a>
                            </div>
                    </div> 

                    <div class="view view-second">
                          <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" />
                            <div class="mask"></div>
                            <div class="content">
                                <h2 id="testimonials">Testimonials</h2>
                                <p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
                                <a href="#" class="info">Read More</a>
                            </div>
                    </div> 

                    </div>
                </div>
                </div>
        </section>
        
    </body>
</html>

Solution

  • Just make some changes in your css and you can easily get your desired result through the mentioned below css

    CSS

    div#all {
    border: 1px solid;
    display: block;
    height: 100%;
    overflow: hidden;
    text-align: center;
    width: 100%;
}


.view {
    background: url("../images/bgimg.jpg") no-repeat scroll center center #FFFFFF;
    border: 10px solid #FFFFFF;
    box-shadow: 1px 1px 2px #E6E6E6;
    cursor: default;
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

    DEMO