htmlcsscenter
How to center align inside container and get uniform width
I need to horizontally center align all the content shown in the image below.
I need also to make all the table cells at the same width, since it seems that they are auto adjusting according to the font awesome icon size.
How can I make this?
My HTML
<section id="Four" class="wrapper style3">
<div class="inner">
<div class="container">
<div class="row">
<div class="two columns">
<i class="fa fa-truck fa-5x"></i>
<h3>A Fleet of</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
</div>
<p class="text-box">TRUCKS</p>
</div>
<div class="two columns">
<i class="fa fa-users fa-5x"></i>
<h3>Involving</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">EMPLOYEES</p>
</div>
<div class="two columns">
<i class="fa fa-cubes fa-5x"></i>
<h3>Loading</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
</div>
<p class="text-box">FTL LOADS IN 2016</p>
</div>
<div class="two columns">
<i class="fa fa-leaf fa-5x"></i>
<h3>Emissions</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
</div>
<p class="text-box">100% EURO 6</p>
</div>
<div class="two columns">
<i class="fa fa-compress fa-5x"></i>
<h3>Trailers</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">TRAILERS</p>
</div>
<div class="two columns">
<i class="fa fa-calendar fa-5x"></i>
<h3>Since</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
</div>
<p class="text-box">25 YEARS OF SERVICE</p>
</div>
</section>
</div>
</div>
</section>
Solution
You can use flexbox with flex-grow and flex-basis to make the columns equal width and fill the row.
.row {
display: flex;
}
.row .columns {
flex-grow: 1;
flex-basis: 0;
margin: 0 1em;
background: #eee;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="Four" class="wrapper style3">
<div class="inner">
<div class="container">
<div class="row">
<div class="two columns">
<i class="fa fa-truck fa-5x"></i>
<h3>A Fleet of</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
</div>
<p class="text-box">TRUCKS</p>
</div>
<div class="two columns">
<i class="fa fa-users fa-5x"></i>
<h3>Involving</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">EMPLOYEES</p>
</div>
<div class="two columns">
<i class="fa fa-cubes fa-5x"></i>
<h3>Loading</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
</div>
<p class="text-box">FTL LOADS IN 2016</p>
</div>
<div class="two columns">
<i class="fa fa-leaf fa-5x"></i>
<h3>Emissions</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
</div>
<p class="text-box">100% EURO 6</p>
</div>
<div class="two columns">
<i class="fa fa-compress fa-5x"></i>
<h3>Trailers</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">TRAILERS</p>
</div>
<div class="two columns">
<i class="fa fa-calendar fa-5x"></i>
<h3>Since</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
</div>
<p class="text-box">25 YEARS OF SERVICE</p>
</div>
</section>
</div>
</div>
</section>Or you can give the columns a specific width, and use justify-content to center them
.row {
display: flex;
justify-content: center;
}
.row .columns {
width: 150px;
margin: 0 1em;
background: #eee;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="Four" class="wrapper style3">
<div class="inner">
<div class="container">
<div class="row">
<div class="two columns">
<i class="fa fa-truck fa-5x"></i>
<h3>A Fleet of</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
</div>
<p class="text-box">TRUCKS</p>
</div>
<div class="two columns">
<i class="fa fa-users fa-5x"></i>
<h3>Involving</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">EMPLOYEES</p>
</div>
<div class="two columns">
<i class="fa fa-cubes fa-5x"></i>
<h3>Loading</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
</div>
<p class="text-box">FTL LOADS IN 2016</p>
</div>
<div class="two columns">
<i class="fa fa-leaf fa-5x"></i>
<h3>Emissions</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
</div>
<p class="text-box">100% EURO 6</p>
</div>
<div class="two columns">
<i class="fa fa-compress fa-5x"></i>
<h3>Trailers</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">TRAILERS</p>
</div>
<div class="two columns">
<i class="fa fa-calendar fa-5x"></i>
<h3>Since</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
</div>
<p class="text-box">25 YEARS OF SERVICE</p>
</div>
</section>
</div>
</div>
</section>- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome