I saw in a previous post that the solution to prevent those annoying bullets to show up in our beautifull HTML was adding this: list-style-type: none; in our CSS.
It looks this way right now
Okay, but the problem is the following: I am using: display: list-item; and if I add that css code it changes to this
As you can see it gets all messed up.
Any possible way to prevent all that mess or removing bullets without that happening? And keeping the same structure, 5 columns in a row with the same size, and allowing some of those to be "double data" (left floated and right floated)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" autofocus />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
body{
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {
}
#input {
width: 10%;
padding: 1px;
margin: auto;
}
.global{
width: 18%;
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small{
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
}
#header {
text-align:left;
clear: both;
font-size: 22px;
}
ul
{
list-style-type: none;
}
.izq { float: left; }
.der { float: right; }
This issue has nothing to do with the the bullets or display:list-item and the "messed up" layout is caused the the #small11 element collapsing as it only contains floated elements.
All that is required is a "clearfix" of which there are several.
body {
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {} #input {
width: 10%;
padding: 1px;
margin: auto;
}
.global {
width: 50%;
/* for this demo */
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small {
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
list-style-type: none;
overflow: hidden;
/* cleafix */
}
#header {
text-align: left;
clear: both;
font-size: 22px;
}
.izq {
float: left;
}
.der {
float: right;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
For my webpage, I want three inline images, with my logo below and a horizontal menu below and that is it, but it won't let me center it all. Can anyone help me? Here's my code:
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
Just to reiterate, what I'm trying to do is have on the top center three images that are aligned (each image is 320px).
Below, trying to have my logo.
And right below it, a small menu.
Nothing to fancy, really. Thanks for the read.
Simply add justify-content:center; to the .row class. See my example below of it working
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
justify-content:center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
justify-content:center;
display: flex;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
I change a few lines from your css code:
Removed max-width property from column class.
Removed display: block; from li a class.
Modified ul and li styles with custom id="horizontal-list".
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width: 100%;" />
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor" />
</div>
<div class="menu">
<ul id="horizontal-list">
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
li a {
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
#horizontal-list li {
display: inline;
}
.menu {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
Hope this helps you.
I'm creating online shop.
I want to create two column layout.
On the left side will be the tab gallery. On the right side i want to display the options for purchase like size,quantity,color,button for buy and etc.
I'm using bootstrap.
I want to doing something like this:
online shop
This is my codepen: https://codepen.io/anon/pen/KYeWPj
I have this code:
/*google analytics js */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
font-family: 'helvetive neue', sans-serif;
font-weight: 700;
}
.container {
width: 600px;
position: relative;
margin-top: 30px;
margin-left: 0px;
}
.thumbnails {
list-style: none;
font-size: 0;
margin-left: -2%;
}
.thumbnails li {
display: inline-block;
width: 23%;
margin-left: 2%;
text-align: center;
vertical-align: middle;
}
.thumbnails li:hover .item-hugger {
background: white;
}
.thumbnails li:hover .item-hugger .title {
color: #000;
}
.thumbnails input[name="select"] {
display: none;
}
.thumbnails .item-hugger {
position: relative;
height: 140px;
margin: 20px 0;
background: #f2f2f2;
transition: all 150ms ease-in-out;
}
.thumbnails label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.thumbnails .title {
padding: 20px 0 0;
font-size: 18px;
color: #555;
transition: all 150ms linear;
}
.thumbnails .thumb-image {
height: 100px;
padding: 20px 0;
}
.thumbnails .content {
position: absolute;
bottom: 0;
left: 0;
width: 600px;
height: 500px;
padding: 50px;
opacity: 0;
transition: all 150ms linear;
display: flex;
flex-direction: column;
justify-content: center;
}
.thumbnails .content .title {
font-size: 60px;
font-weight: 400;
display: inline-block;
color: #555;
border-bottom: 6px solid #fe7701;
padding: 50px 10px 0;
text-transform: uppercase;
}
.thumbnails input[name="select"]:checked+.item-hugger {
height: 180px;
margin: 0;
background: white;
}
.thumbnails input[name="select"]:checked~.content {
opacity: 1;
}
.white-box {
background: white;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title style="margin-bottom: 10px;">Item</title>
</head>-->
<body>
<div class="container">
<h1 style="margin-top:40px; text-align:center">Item</h1>
<ul class="thumbnails">
<li>
<input type="radio" name="select" id="image1">
<div class="item-hugger">
<div class="title">Image 1</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=882" />
<label for="image1"></label>
</div>
<div class="content">
<div class="item-wrapper"> <img src="https://unsplash.it/1024/612?image=882" />
<div class="title">Image 1</div>
</div>
</div>
</li>
<li class="is-active">
<input type="radio" name="select" id="image2" checked>
<div class="item-hugger">
<div class="title">Image 2</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=782" />
<label for="image2"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=782" />
<div class="title">Image 2</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image3">
<div class="item-hugger">
<div class="title">Image 3</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=682" />
<label for="image3"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=682" />
<div class="title">Image 3</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image4">
<div class="item-hugger">
<div class="title">Image 4</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=582" />
<label for="image4"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=582" />
<div class="title">Image 4</div>
</div>
</div>
</li>
</ul>
<div class="white-box"></div>
</div>
</body>
A really easy way of doing this would be to use a table. It doesn't require any CSS, just a simple table that doesn't have a visible border.
The way you do this is putting a <tr> tag around the content you want to align by each other and a <table> tag surrounding the <tr> tags. It should look like this:
<table><tr>YOUR ELEMENTS</tr></table>.
Now, take each of your elements that you'd like to be aligned side-by-side and put them in their own <td> tags. This is what it should look like now:
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr></table>
This should fix your problem. If you, for whatever reason, see borders around your elements you can to <table style="border: none;"> instead of just saying <table>. Hope this helped!
I'm having a problem that's driving me crazy because I know the solution is likely right in front of my eyes. I have a dropdown menu that I want to change on the screen reaching a size. Here is the snippet of what it it is like when it's unedited.
.box {
float: left;
position: relative;
top: -50px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: left;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This works fine and how I want it. But my trouble comes when I try to change the float value when the screen reaches a certain size by doing the following:
#media screen and (max-width: 768px) {
#Dropdown {display: block;}
.box button {
float: top;
display: inline-block;
}
.box {
float: top;
position: static;
top: 0;
margin-top: 10px;
max-height: 45px;
max-width: 150px;
}
}
But for some reason it doesn't work right. It should appear like the following page:
.box {
float: top;
margin-top: 0px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: top;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This is a pretty long winded question so any help on this would be greatly appreciated!
As I know, there is no css command float:top;. float can take the parameters: left, right, none, inline-start, inline-end.
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo