Look at my screenshot, How can I move these two elements in the center.
The elements are .
I did almost anything but not working.
Anybody could help? Text-align: center not working either
.setup-box {
margin-left: 1em;
}
.treeview-box-title {
padding-top: .5em;
margin-top: 1.5em;
}
.treeview-container {
display: flex;
justify-content: space-between;
}
.treeview-ul {
margin: 0 1em 0 1.5em;
text-align: left;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<h4 class="treeview-box-title">Windows</h4>
<div class="treeview-container">
<ul class="treeview-ul">
<li>
Download Application
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<h4 class="treeview-box-title">Android</h4>
<div class="treeview-container">
<ul class="treeview-ul">
<li>Google PlayStore</li>
</ul>
</div>
</div>
</div>
</div>
add to your div.row d-flex and justify content:
<div class="row mx-auto d-flex justify-content-center">
.setup-box {
margin-left: 1em;
border:1px solid blue;
border-radius:0.5em;
}
.m-g-b{
margin-bottom:20px;
}
.windows-header{
border-bottom:1px solid blue;
}
.android-header{
border-bottom:1px solid blue;
}
.treeview-box-title {
text-align:center;
}
.treeview-container {
display: flex;
padding:0.1em;
}
.treeview-ul {
text-align: left;
}
<div class="row m-g-b">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<div class="windows-header">
<h4 class="treeview-box-title">Windows</h4>
</div>
<div class="treeview-container">
<ul class="treeview-ul">
<li>
Download Application
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<div class="android-header">
<h4 class="treeview-box-title">Android</h4>
</div>
<div class="treeview-container">
<ul class="treeview-ul">
<li>Google PlayStore</li>
</ul>
</div>
</div>
</div>
</div>
Related
I'm working on a site which needs an image centered in the div on the left side, centered off the right div with a background.
I tried to a common solution, but for some reason, it won't work. It must be responsive as well, so I'm a bit in the dark over here. See my fiddle for the example.
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6">
<div class="leftSide">
<img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="rightSide">
<h3>
Some text
</h3>
<p>
Some more text
</p>
<button type="button" class="btn btn-primary">Some text</button>
</div>
</div>
https://jsfiddle.net/Onno0297/grvwxby2/1/
If I understand your question correctly then below code will work.
Visit https://jsfiddle.net/alishapatel/n3ap1vjo/4/!
.leftSide {
height: 100%;
display: flex;
align-items: center;
}
.rightSide {
background: #313131;
height: 546px;
color: #fff;
}
.rightSide h3 {
text-align: center;
padding-top: 200px;
}
.rightSide p {
text-align: center;
}
.btn.btn-primary {
margin: 0 auto;
display: block;
}
.imgLeft {
max-height: 400px;
max-width: 300px;
margin: 0 auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6">
<div class="leftSide">
<img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="rightSide">
<h3>
Some text
</h3>
<p>
Some more text
</p>
<button type="button" class="btn btn-primary">Some text</button>
</div>
</div>
</div>
</div>
I'm trying to create the following layout for one of my web projects. What's the best way to create that using HTML, CSS (Flex)?
I'm struggling with bottom-margin for C & D in Desktop screens, for D in Mobile screens.
As we don't have your code, so based on your question here i provide solution let me know if you have any question..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 mb-5">
<div class="card p-5">
A
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
B
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
C
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
D
</div>
</div>
</div>
</div>
You can do it like this.
.main_container {
display: grid;
grid-template-columns: auto auto;
grid-row-gap: 30px;
grid-column-gap: 30px;
}
.sections {
height: 200px;
text-align: center;
background-color: aqua;
}
/*here for mobiles inside mobile media query put this*/
.main_container {
display: grid;
grid-template-columns: auto;
grid-row-gap: 30px;
grid-column-gap: 30px;
}
<div class="main_container">
<div class="sections">A</div>
<div class="sections">B</div>
<div class="sections">C</div>
<div class="sections">D</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here A</p>
</div>
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here B</p>
</div>
</div>
<div class="cs-t20">
<!-- spacer -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here C</p>
</div>
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here D</p>
</div>
</div>
<div class="cs-t20">
<!-- spacer -->
</div>
</div>
<style>
.cs-t20{
width: 100%;
height: 30px;
}
</style>
Hope it will help you!! All the Best !!
here your go..
.cs-t20 {
width: 100%;
height: 30px;
}
.continer {
width: 100%;
height: 100%;
}
.webpage-page-display {
float: none;
display: table-cell;
}
.webpage-page-column {
z-index: 1;
float: left;
position: relative;
min-height: 1px;
}
.webpage-page-half {
margin-left: 6%;
width: 47%;
}
.webpage-page-first {
margin-left: 0px;
clear: left;
}
.webpage-page-half {
width: 100%;
}
.webpage-page-column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
.webpage-page_column_table_cell {
display: block;
}
.webpage-page-half {
width: 100%;
}
.webpage-page-column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
}
<div id="webpage_section">
<div class="container">
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">
<p>Write text here A</p>
</div>
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
<p>Write text here B</p>
</div>
<div class="cs-t20"></div>
</div>
</div>
<div id="webpage_section">
<div class="container">
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">
<p>Write text here C</p>
</div>
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
<p>Write text here D</p>
</div>
<div class="cs-t20"></div>
</div>
</div>
I'm having some trouble removing the space between the two sections of my code.
Here is the JSFiddle of my code.
/********************Intro**********************/
.intro-content {
padding-top: 250px;
}
.intro-content h1 {
font-family: "Arial Black";
font-weight: bolder;
}
#typed {
font-family: monospace;
font-size: 20px;
}
.button {
padding-top: 50px;
}
.button button {
background-color: black;
border-color: black;
border-radius: 25px;
color: white;
font-weight: bolder;
margin-bottom: 22%;
}
/********************Intro*********************/
/********************Contact*********************/
#about {
background-color: lightgray;
}
#skill {
background-color: lightblue;
}
#intro-section {
background-color: lightgreen;
}
.contact-info h4 {
font-family: "Arial Black";
font-weight: bolder;
}
.contact-icon {
padding-top: 50px;
}
.contact-block {
padding-top: 20px;
align-content: center;
margin-left: 5%;
}
.aboutme h1 {
padding-top: 50px;
margin-left: 50px;
font-family: "Arial Black";
font-size: 50px;
color: black;
font-weight: bolder;
text-shadow: 2px 2px darkgray;
}
.my-contact .contact-info {
display: table-cell;
font-size: 18px;
}
.my-contact .contact-icon span {
font-size: 20px;
margin-right: 15px;
float: left;
margin-top: 25px;
}
.contact-summary {
padding-top: 70px;
font-style: italic;
font-size: 20px;
}
.contact-developer {
padding-top: 95px;
margin-bottom: 7%;
font-size: 15px;
font-weight: bold;
}
/********************Contact*********************/
<!----------------------Intro-------------------------------->
<section id="intro-section" class="intro">
<div class="intro-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h1>HELLO, I'M ERIC.</h1>
<div id="typed-strings">
<p>Welcome to my personal website!</p>
<p>UI DESIGNER / WEB DEVELOPER</p>
</div>
<span id="typed"></span>
<div class="button">
<button>GET IN TOUCH</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Intro----------------------------->
<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
<h1>ABOUT ME</h1>
<div class="container-fluid">
<div class="contact-block clearfix">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-summary">
<p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
fully functional website. If you have an idea, I will make it happen. You can reach me at
one of my contact options below.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-user"></span>
<div class="contact-info">
<h4>Name:</h4>
<p>Eric</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-envelope"></span>
<div class="contact-info">
<h4>Email:</h4>
<p>e#gmail.com</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-phone"></span>
<div class="contact-info">
<h4>Phone:</h4>
<p>(563)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-calendar"></span>
<div class="contact-info">
<h4>Date of Birth:</h4>
<p>April</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-globe"></span>
<div class="contact-info">
<h4>Location:</h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-flag"></span>
<div class="contact-info">
<h4>Nationality:</h4>
<p>United States</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-developer">
<p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Contact----------------------------->
That's the margin on your h1's collapsing outside of the parent. There are a bunch of ways to fix it, so I just removed the top margin on h1.
Here's a resource - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
/********************Intro**********************/
.intro-content {
padding-top: 250px;
}
.intro-content h1 {
font-family: "Arial Black";
font-weight: bolder;
}
#typed {
font-family: monospace;
font-size: 20px;
}
.button {
padding-top: 50px;
}
.button button {
background-color: black;
border-color: black;
border-radius: 25px;
color: white;
font-weight: bolder;
margin-bottom: 22%;
}
/********************Intro*********************/
/********************Contact*********************/
#about {
background-color: lightgray;
}
#skill {
background-color: lightblue;
}
#intro-section {
background-color: lightgreen;
}
.contact-info h4 {
font-family: "Arial Black";
font-weight: bolder;
}
.contact-icon {
padding-top: 50px;
}
.contact-block {
padding-top: 20px;
align-content: center;
margin-left: 5%;
}
.aboutme h1 {
padding-top: 50px;
margin-left: 50px;
font-family: "Arial Black";
font-size: 50px;
color: black;
font-weight: bolder;
text-shadow: 2px 2px darkgray;
}
.my-contact .contact-info {
display: table-cell;
font-size: 18px;
}
.my-contact .contact-icon span {
font-size: 20px;
margin-right: 15px;
float: left;
margin-top: 25px;
}
.contact-summary {
padding-top: 70px;
font-style: italic;
font-size: 20px;
}
.contact-developer {
padding-top: 95px;
margin-bottom: 7%;
font-size: 15px;
font-weight: bold;
}
/********************Contact*********************/
h1 {
margin-top: 0;
}
<!----------------------Intro-------------------------------->
<section id="intro-section" class="intro">
<div class="intro-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h1>HELLO, I'M ERIC.</h1>
<div id="typed-strings">
<p>Welcome to my personal website!</p>
<p>UI DESIGNER / WEB DEVELOPER</p>
</div>
<span id="typed"></span>
<div class="button">
<button>GET IN TOUCH</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Intro----------------------------->
<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
<h1>ABOUT ME</h1>
<div class="container-fluid">
<div class="contact-block clearfix">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-summary">
<p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
fully functional website. If you have an idea, I will make it happen. You can reach me at
one of my contact options below.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-user"></span>
<div class="contact-info">
<h4>Name:</h4>
<p>Eric</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-envelope"></span>
<div class="contact-info">
<h4>Email:</h4>
<p>e#gmail.com</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-phone"></span>
<div class="contact-info">
<h4>Phone:</h4>
<p>(563)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-calendar"></span>
<div class="contact-info">
<h4>Date of Birth:</h4>
<p>April</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-globe"></span>
<div class="contact-info">
<h4>Location:</h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-flag"></span>
<div class="contact-info">
<h4>Nationality:</h4>
<p>United States</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-developer">
<p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Contact----------------------------->
I am using bootstrap to create a layout however, I can't seem to understand why display:inline-block with vertical-align: middle isn't working.
I would prefer not to use position absolute.
JSFiddle: https://jsfiddle.net/yheep9hh/
Any help would be appreciated
HTML:
Currently using bootstrap to create the layout (navbar, etc)
<header>
<nav class="navbar navbar-transparent">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">hello</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="/Home">Home</a></li>
<li>Website Design</li>
<li>Tech Support</li>
<li>Data Security</li>
<li>Networking</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid wrapper bgImage">
<div class="indexWelcome">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Welcome To Amparo Tech</h1>
<h3 class="text-center">How Can We Help You?</h3></div>
</div>
<div class="row input-fixedWidth">
<div class="col-md-12">
<form class="homeForm" method="POST">
<div class="row">
<div class="col-sm-8 col-sm-push-2 col-md-8">
<input class="homeFormEmail" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-push-2 col-md-8">
<input class="homeFormPostcode" type="text" name="postcode" placeholder="Postcode">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-push-2 col-md-8">
<textarea class="homeFormMessage" name="message" placeholder="Your Message or Tech Issue"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-4 text-left pull-left">
<p>name</p>
</div>
<div class="col-md-4 text-right pull-right">
<p>number</p>
</div>
<div class="col-md-4 text-center">
<p>address</p>
</div>
</div>
</div>
</footer>
CSS:
Custom CSS
* {
box-sizing: border-box;
}
html,
body {
height:100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin:0 auto;
margin-bottom: 10px;
}
.wrapper {
min-height:calc(100% - 82px);
margin: 0 auto -10px;
}
.footer, .push {
height: 10px;
}
.navbar {
margin:0;
height:52px;
}
input, textarea {
width: 100%;
margin:0 auto;
}
.input-fixedWidth {
max-width:750px;
margin: 0 auto;
}
.formWrapper {
position:relative;
}
.indexWelcome {
display:inline-block;
vertical-align:middle;
width: 100%;
text-align:center;
}
.navbar-transparent {
background-color: transparent;
}
.homeFormEmail {
margin-top: 20px;
}
.homeFormEmail,
.homeFormPostcode,
.homeFormMessage {
text-indent: 10px;
margin-bottom: 15px;
font-size:14px;
}
.homeFormEmail,
.homeFormPostcode {
height:40px;
}
.homeFormMessage {
height: 80px;
padding-top:10px;
resize: vertical;
}
Vertical-align:middle; works well with display:table-cell; that is if the parent div is display:table;
To display a <div> block vertically aligned in the middle, you need to use display table and table-cell to the parent and child respectively.
Have a look at the updated Fiddle (jsFiddle)
Just like:
/* Parent */
.wrapper {
display: table;
}
/* Child */
.indexWelcome {
display: table-cell;
}
Hope this helps!
since css flexbox is supported almost everywhere these days i would use it, since it makes vertical alignment very easy:
.wrapper {
display:flex;
align-items:center;
justify-content:center;
}
demo: https://jsfiddle.net/7totjt2p/2/
I am using bootstrap to center a block of social icons underneath h1 text on all screen sizes. I almost got it, there are just 2 sizes where it keeps shifting.
Here is how it looks where it is shifted to the left slightly
here it's shifted to the right slightly
Here is my code:
<div id="container">
<div class="social-and-coming">
<div class="coming-soon text-center ">
<h1 class="coming ">Coming Soon</h1>
</div>
<div class="row">
<ul class="col-md-offset-3 col-md-11 col-sm-offset-3 col-sm-11 col-xs-offset-1 col-xs-11">
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></li>
</ul>
</div>
</div>
</div>
and here is my css:
#container{
// min-height:100%;
position:relative;
}
.site-title a{
font-family: Heiti TC;
color: #E8970C;
}
.text-center{
color: #E8970C;
}
.coming-soon h1{
font-family: Heiti TC;
font-size: 75px;
}
.row{
// width:700px;
margin: 0px auto;
}
.col-xs-1{
margin-left: 15px;
}
li{
margin-right: 20px;
margin-top: 20px;
}
img{
width:40px;
}
any help would be greatly appreciated!
Just remove the list and use text-center like you did for the title, it should work:
<div id="container">
<div class="social-and-coming">
<div class="coming-soon text-center">
<h1 class="coming">Coming Soon</h1>
</div>
<div class="text-center">
<img src="/wp-content/themes/avaziomedia/Facebook.png" alt="">
<img src="/wp-content/themes/avaziomedia/Twitter.png" alt="">
<img src="/wp-content/themes/avaziomedia/Instagram.png" alt="">
<img src="/wp-content/themes/avaziomedia/Youtube.png" alt="">
<img src="/wp-content/themes/avaziomedia/pinterest.png" alt="">
</div>
</div>
</div>
You are using some bootstrap offsets and so it will never be in the middle. I would suggest simplifying this and getting rid of the UL classes and add an id to it which applies the following CSS:
#socialLinks {
list-style:none;
text-align: center;
}
#socialLinks li {
margin: 0;
display: inline-block;
float: none;
}
jsFiddle demo
#container {
// min-height:100%;
position: relative;
}
.site-title a {
font-family: Heiti TC;
color: #E8970C;
}
.text-center {
color: #E8970C;
}
.coming-soon h1 {
font-family: Heiti TC;
font-size: 75px;
}
.row {
// width:700px;
margin: 0px auto;
}
.col-xs-1 {
margin-left: 15px;
}
li {
margin-right: 20px;
margin-top: 20px;
}
img {
width: 40px;
}
#socialLinks {
list-style:none;
text-align: center;
}
#socialLinks li {
margin: 0;
display: inline-block;
float: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<div class="social-and-coming">
<div class="coming-soon text-center ">
<h1 class="coming ">Coming Soon</h1>
</div>
<div class="row">
<ul id="socialLinks">
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
</ul>
</div>
</div>
</div>
It's quite easy:
.yourclass {
width: SPECIFY_WIDTH;
margin: 0 auto;
}
It will always center irresepctive of any screen size. If you want spacing around on small devices then add padding to class.
Can you not use Bootstraps Div class helpers?
class: Text-center (text)
Class: center-block (images)
They seem to work for me, i dont do offsets much so not 100% how effective they will be.