Row of <div> elements will not align to the center-CodePudding

I've read a hundred posts about how to center a row of divs, but I can't seem to get this to work. I want these elements to align to the center of their container, while maintaining a gap between each of them. No matter what I seem to do, they hug the left.

Do I need to change the CSS on the container element, or the individual div items themselves?

Help!

.news_section {

    width: 100%; 
    height: 100%; 
    margin-left: auto;
    margin-right: auto;
  }
  
  
.news_container { 

border: 1px red solid; 
width: 100%; 
height: 100%;
position: relative;
overflow: hidden; 
margin-left: auto; 
margin-right: auto;
text-align: center; 


}
  
.news_item { position: relative; float: left; font-family: graphik-light; font-size: 1.1em; margin: 25px 25px 25px 0px; width: 220px; height: 400px; cursor: pointer; transition: all 0.2s ease-out;
    -webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
    -moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
    box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
    
     } 
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }

.news_img { 
    width: 100%;
    height: 100%; 
    object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }


.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }

<section > 
<div >

            <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      
                <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      
      
                <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      

      
</div>
</section>

CodePudding user response：

On the news_item ... Change that

float: left;

display: inline-block;

.news_section {

    width: 100%; 
    height: 100%; 
    margin-left: auto;
    margin-right: auto;
  }
  
  
.news_container { 

border: 1px red solid; 
width: 100%; 
height: 100%;
position: relative;
overflow: hidden; 
margin-left: auto; 
margin-right: auto;
text-align: center; 


}
  
.news_item { position: relative; display: inline-block; font-family: graphik-light; font-size: 1.1em; margin: 25px 25px 25px 0px; width: 220px; height: 400px; cursor: pointer; transition: all 0.2s ease-out;
    -webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
    -moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
    box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
    
     } 
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }

.news_img { 
    width: 100%;
    height: 100%; 
    object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }


.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }

<section > 
<div >

            <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      
                <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      
      
                <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      

      
</div>
</section>

Better still, take a look at flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

If you want to align all items to the center, you need to use Flexbox. Basically, you gotta add this code to align everything of your container in center:

CSS:

.container: {
   display: flex; /* flexbox */
   justify-content: center;  /* horizontal center */
   align-items: center; /* vertical center */
}

This is an excelent article about Flexbox, made by W3School:

W3School - CSS Flexbox

CodePudding user response：

By using flex it will become Responsive View it in Full Page for observe the difference

Remove margin: 25px 25px 25px 0px;  to .news-item

And

use display:flex; justify-contnet:center; align-items:center; to 
.news_container

.news_container { 

/*border: 1px red solid;*/ 
width: 100%; 
height: 100%;
position: relative;
overflow: hidden; 
margin-left: auto; 
margin-right: auto;
text-align: center; 
display:flex;
justify-content:center;
align-items:center;
}
  
.news_item { position: relative; font-family: graphik-light; font-size: 1.1em; width: 220px; height: 400px;
margin:10px; cursor: pointer; transition: all 0.2s ease-out;
    -webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
    -moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
    box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
    
     } 
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }

.news_img { 
    width: 100%;
    height: 100%; 
    object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }


.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }
<section >

<section > 
<div >

            <div >
                <div><img                 src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      
                <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      
      
                <div >
                <div><img src="https://thruline.com/prototype/images/news/news.jpeg" /></div>
                <div >News title Here</div>
                <div >MAGAZINE OUTLET</div>
                <div >Description of articles goes here....</div>
                <div >Click Here to Read More...</div>
            </div>
      
      
      

      
</div>
</section>