I have a list of items with a number and text stacked ontop of each other - I am struggling with trying to vertically align the text next to the number it is sitting along side. I have the number and text just floated left inside a div - possibly I need to take a different approach? See working exmaple here - https://codepen.io/ajmajma/pen/gRpxrQ?editors=1100
My html for the items is structured like so :
<div class="featured-posts wrapper">
<div class="featured-posts--posts row">
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">1</span>10 Tips to Avoid Dry Flaky Winter Skin, Safely</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">2</span>10 Ways to Spa at Home</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">3</span>13 Healthy Ways Winterize Your Routine</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">4</span>18 Things to Love About Our Follain Soap</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">5</span><3 at First Site</div>
</div>
</div>
</div>
</div>
And the CSS (SCSS) looks like so :
.featured-posts {
counter-reset: section;
.featured-posts--posts {
.featured-post {
margin-bottom: 40px;
width: 100%;
.featured-post--wrapper {
margin: 0 auto;
}
.featured-post--count {
width: 45px;
float: left;
color: red;
height: 100%;
display: block;
font-size: 30px;
}
.featured-post--body {
width: 350px;
max-width: 100%;
margin: 0 auto;
color: black;
a {
cursor: pointer;
text-decoration: none;
color: black;
transition: color 0.2s ease-in;
&:hover {
color: red;
}
}
}
}
}
}
I am trying to have so no matter what length the text is - it is vertically aligned against the "Count" (the left number). Any input would be welcome! Thanks.
I would use display: flex; align-items: center; on the parent
.wrapper {
margin: 0 auto;
max-width: 600px;
}
.featured-posts {
counter-reset: section;
}
.featured-posts .featured-posts--posts .featured-post {
margin-bottom: 40px;
width: 100%;
}
.featured-posts .featured-posts--posts .featured-post .featured-post--wrapper {
margin: 0 auto;
}
.featured-posts .featured-posts--posts .featured-post .featured-post--count {
width: 45px;
color: red;
height: 100%;
display: block;
font-size: 30px;
}
.featured-posts .featured-posts--posts .featured-post .featured-post--body {
width: 350px;
max-width: 100%;
margin: 0 auto;
color: black;
display: flex;
align-items: center;
}
.featured-posts .featured-posts--posts .featured-post .featured-post--body a {
cursor: pointer;
text-decoration: none;
color: black;
transition: color 0.2s ease-in;
}
.featured-posts .featured-posts--posts .featured-post .featured-post--body a:hover {
color: red;
}
<div class="featured-posts wrapper">
<div class="featured-posts--posts row">
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">1</span>10 Tips to Avoid Dry Flaky Winter Skin, Safely</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">2</span>10 Ways to Spa at Home</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">3</span>13 Healthy Ways Winterize Your Routine</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">4</span>18 Things to Love About Our Follain Soap</div>
</div>
</div>
<div class="featured-post col-12">
<div class="featured-post--wrapper">
<div class="featured-post--body"><span class="featured-post--count">5</span><3 at First Site</div>
</div>
</div>
</div>
</div>
Related
I am absolute newbee and wanna create 2 rows. One with 2 img col-4 size and col-8 size and the other row à 3 x col-4 size.
My problem is that the col-8 img is a little bit bigger (height) then the col-4 img.
How can I fix it? I tried a lot but nothing worked.
Thanks for your help.
[problem
.col-4 {
padding-left: 5px;
padding-right: 5px;
}
.col-8 {
padding-left: 5px;
padding-right: 5px;
}
.x1 {
border: 1px solid black;
}
.x2 {
border: 1px solid black;
}
.x1_pic {
width: 100%;
height: auto;
position: relative;
}
.x2_pic {
width: 100%;
height: auto;
position: relative;
}
.x1_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
.x2_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-8">
<div class="x2">
<img class="x2_pic" src="./img/maschine_2.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
</div>
</div>
]1
I have 2 columns of numbers that I want them to appear side by side. It works when I try using float: left but I want them to appear in the center. Without the float they appear one row then next row downwards.
body {
color: #fff;
text-align: center;
}
#roll, #roll2, #roll3, #roll4 {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll3">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll4">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
you have to add a parent (container) div around all your html with following styles:
<div style="margin:0 auto; display:inline-block">
see it here:
body {
color: #fff;
text-align: center;
}
#roll, #roll2, #roll3, #roll4 {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
.container {
display:inline-block;
margin:0 auto;
}
<div class="container">
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll3">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll4">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
</div>
you can center and keep items side by side using inline-block like this
.floatleft {
display: inline-block;
}
I'm trying to center some divs within another div for a webapp I'm making. I'm using the bootstrap 3 framework, but cannot get the divs to center vertically.
HTML:
<body>
<div id="container-main" class="container" align="center" style="min-height:100%">
<div class="row">
<div id="player-page-top" class="container">
<div id="player-page-summoner" class="container-fluid">
<h1>
<img src="http://i.imgur.com/eDeFxAe.png"> Name
</h1>
<div id="player-page-ranks">
<ul class="ul-ranks">
<li class="ranks">S3 Silver</li>
<li class="ranks">S4 Gold</li>
<li class="ranks">S5 Diamond</li>
<li class="ranks">S6 Master</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div id="player-page-left" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Leagues
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Champion Stats
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div id="player-page-right" class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
Recent Matches
</div>
<div class="panel-body">
<div class="player-match container-fluid" align="left">
<div class="championdetails col-md-4">
<div class="champimage">
<img src="http://i.imgur.com/CWlqNvT.png">
</div>
<div class="summonerspells">
<div class="player-match-spell">
<img src="http://i.imgur.com/rTpkXlb.png">
</div>
<div class="player-match-spell">
<img src="http://i.imgur.com/nXFjz2w.png">
</div>
</div>
<div class="keymastery">
<img src="http://i.imgur.com/b5lszzu.png">
</div>
</div>
<div class="score col-md-2">
<div class="kda .text-center">
10 / 7 / 12
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
h1,
h2,
h3,
h4,
h5 {
font-family: "source sans pro", "proxima-nova", sans-serif;
color: #4b4b4b;
}
#media (min-width: 1200px) {
.container {
max-width: 960px;
}
}
.holder {
height: 100%;
width: 100%;
display: block;
}
.match-middle {
display: inline-block;
vertical-align: middle;
float: none;
}
.player-match {
border: solid 1px #ddd;
padding-top: 7px;
padding-bottom: 7px;
}
.championdetails,
.score {
padding-left: 0px;
padding-right: 0px;
text-align: center;
height: 100%;
}
.summonerspells,
.champimage,
.keymastery {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.player-match-spell {
display: block;
margin-bottom: 2px;
}
.summonerspells img,
.keymastery img {
height: 30px;
width: 30px
}
.champimage img {
height: 60px;
width: 60px;
border-radius: 40px;
}
#player-page-left,
#player-page-right {
/*border: 1px solid grey; */
}
#gameplay-baseball-field {
padding-right: 10px;
padding-left: 10px;
}
#player-page-top {
margin: 20px 0 20px 0;
}
#player-page-top img {
width: 60px;
height: 60px;
border-radius: 8px;
}
.ul-ranks>.ranks {
display: inline-block;
color: #4b4b4b;
background: #e0e3e3;
padding: 0 4px 0 4px;
margin: 3px 2px 0px 2px;
border-radius: 4px;
}
.ul-ranks {
-webkit-padding-start: 0px;
}
JSFiddle
I'm trying to center the "score" and "championdetails" divs vertically inside the "player-match" div. I can't get it to center without it skewing the other divs.
I have closely followed the most popular example of how to add space between columns, but it doesn't work. You can view it in action at
codepen.io
What I've done is put a col-sm-12 inside of a col-sm-4 for each column. According to the most popular answer here this should automatically render some space between the 2 divs.
HTML:
<div class="row blocks-grid">
<div class="col-xs-6 col-sm-4 item">
<div class="col-sm-12">
<img src="http://example.com/1MBVDF4">
<h2>This is me</h2>
</div>
</div>
<div class="col-xs-6 col-sm-4 item">
<div class="col-sm-12">
<img src="http://example.com/1MBVDF4">
<h2>This is me</h2>
</div>
</div>
<div class="col-xs-6 col-sm-4 item">
<div class="col-sm-12">
<img src="http://example.com/1MBVDF4">
<h2>This is me</h2>
</div>
</div>
</div>
CSS:
body {
background: #BEB7A4;
}
.blocks-grid {
max-width:75.0rem;
margin:0 auto;
.item {
cursor: pointer;
margin-bottom:1rem;
position:relative;
height:34.0rem;
padding-top:2.5rem;
background:#FFFFFC;
&:hover {
background:#FF0000;
color:white;
img {
display:none;
}
}
h2 {
font-size:2.0rem;
margin-top:1rem;
text-align: center;
}
img {
max-width: 100%;
margin:auto;
display:block;
}
}
}
Basically, I would think the result would look like the following photo, but it does not:
you can try this: Demo
Add your "item" class with "col-sm-12"
body {
background: #BEB7A4;
}
I made some changes on your code.
HTML
Note the subitem class added to col-sm-12 divs.
<div class="row blocks-grid">
<div class="col-sm-4 item">
<div class="col-sm-12 subitem">
<img src="image_url">
<h2>This is me</h2>
</div>
</div>
<div class="col-sm-4 item">
<div class="col-sm-12 subitem">
<img src="image_url">
<h2>This is me</h2>
</div>
</div>
<div class="col-sm-4 item">
<div class="col-sm-12 subitem">
<img src="image_url">
<h2>This is me</h2>
</div>
</div>
</div>
LESS
body {
background: #BEB7A4;
}
.blocks-grid {
max-width:75.0rem;
margin:0 auto;
.item {
cursor: pointer;
margin-bottom:1rem;
position:relative;
height:34.0rem;
padding-top:2.5rem;
.subitem {
background:#FFFFFC;
height: 100%;
padding-top: 50px;
&:hover {
background:#FF0000;
color:white;
img {
display:none;
}
}
h2 {
font-size:2.0rem;
margin-top:1rem;
text-align: center;
}
img {
max-width: 100%;
margin:auto;
display:block;
}
}
}
}
Take a look: http://codepen.io/anon/pen/KgzVRK
Hope it can helps you.
You can actually remove all the extra junk and let bootstrap do it for you... NEVER change margins / widths on the framework. This is all you need....
HTML
<div class="row">
<div class="col-xs-6 col-sm-4">
<img src="http://placehold.it/350x250">
<h2>This is me</h2>
</div>
<div class="col-xs-6 col-sm-4">
<img src="http://placehold.it/350x150">
<h2>This is me</h2>
</div>
<div class="col-xs-6 col-sm-4">
<img src="http://placehold.it/350x150">
<h2>This is me</h2>
</div>
</div>
CSS
img { width: 100%; }
You may try to move the class item from col-xs-6 to col-sm-12
The snippet:
body {
background: #BEB7A4;
}
.blocks-grid {
max-width: 75.0rem;
margin: 0 auto;
}
.blocks-grid .item {
cursor: pointer;
margin-bottom: 1rem;
position: relative;
height: 34.0rem;
padding-top: 2.5rem;
background: #FFFFFC;
}
.blocks-grid .item:hover {
background: #FF0000;
color: white;
}
.blocks-grid .item:hover img {
display: none;
}
.blocks-grid .item h2 {
font-size: 2.0rem;
margin-top: 1rem;
text-align: center;
}
.blocks-grid .item img {
max-width: 100%;
margin: auto;
display: block;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
background: #BEB7A4;
}
.blocks-grid {
max-width: 75.0rem;
margin: 0 auto;
}
.blocks-grid .item {
cursor: pointer;
margin-bottom: 1rem;
position: relative;
height: 34.0rem;
padding-top: 2.5rem;
background: #FFFFFC;
}
.blocks-grid .item:hover {
background: #FF0000;
color: white;
}
.blocks-grid .item:hover img {
display: none;
}
.blocks-grid .item h2 {
font-size: 2.0rem;
margin-top: 1rem;
text-align: center;
}
.blocks-grid .item img {
max-width: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="row blocks-grid">
<div class="col-xs-6 col-sm-4">
<div class="col-sm-12 item">
<img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">
<h2>This is me</h2>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-sm-12 item">
<img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">
<h2>This is me</h2>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-sm-12 item">
<img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">
<h2>This is me</h2>
</div>
</div>
</div>
</body>
I've got a lot of trouble with getting my checkboxes vertical aligned in my divs with a dynamic height.
I have some of my view:
<div class="col-md-7">
<div class="row recent-information">
<div class="product-navigation">
<div class="product-header-text">
<div class="col-md-3 product-details">
<p>Product name</p>
</div>
<div class="col-md-4 product-details">
<p>Note</p>
</div>
<div class="col-md-2 product-details">
<p>Price</p>
</div>
<div class="col-md-2 product-details">
<p>Stock</p>
</div>
</div>
</div>
#foreach (var item in Model.Products)
{
<div class="product-header">
<div class="product-header-text">
<div class="col-md-3 product-details-entity">
<h6>#item.Name</h6>
</div>
<div class="col-md-4 product-details-entity">
<h6>#item.Description</h6>
</div>
<div class="col-md-2 product-details-entity">
<h6>#item.Price DKK</h6>
</div>
<div class="col-md-1 product-details-entity">
<h6>#item.Stock</h6>
</div>
<div class="col-md-1 product-details-checkbox">
#Html.CheckBox("naem", new { #class = "products-checkbox" })
</div>
</div>
</div>
}
</div>
</div>
And the style:
.product-header {
min-height: 7%;
min-width: 100%;
margin-bottom: 3px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.product-header-text {
width: 98%;
margin-left: 10px !important;
margin-right: 10px !important;
float: left;
font-weight: 700 !important;
margin-bottom: 3px;
height: 100%;
}
.product-details {
font-weight: 500 !important;
margin-top: 13px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
height: auto;
min-height: 100%;
}
.product-details-entity {
margin-top: 20px;
height: auto;
}
input[type="checkbox"] {
background: #f8f8f5;
-webkit-appearance: none;
height: 22px;
width: 22px;
margin-top: 20%;
cursor: pointer;
margin-left: 65px;
}
input[type="checkbox"]:checked {
background-image: url("../Images/checkmark2.png");
height: 22px;
width: 22px;
}
My problem is, that my divs, the product-details are dynamically based on the content from the database, and I can't get my checkboxes to follow.