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.
Related
Somewhat like a ebay search page like this
enter image description here
in my code, only the first listed item looks just like the image above, but every picture after floats to the right side of the page, but the text stays on left.
I want it to look like this:
[]-list
[] -list
[] -list
with the code I have, the image in the second div is pushed to the right side. I want all images and text aligned underneath each other to look somewhat like the ebay layout
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<html>
<style>
*, html {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
color: #000;
font-size: 30px;
font-family: Arial;
}
.clear {
clear: both
}
product_img
{
display:flex;
40px
}
.businessInfo
{
float: left;
margin-left: 12px;
width: 552px;
text-align: left;
}
.businessName
{
float: left;
margin-top: 2px;
text-align: left;
color: #ffffff ;
}
.sitePromotion
{
float: left;
margin-top: 6px;
font-size: 14px;
color: #ffffff ;
}
.baseLocation{
float: left;
font-size: 15px;
background: #ffffff ;
}
.location {
float: left;
font-size: 15px;
color: #ffffff ;
}
.contactInfo {
float: left;
margin-top: 4px;
font-size: 15px;
color: #ffffff ;
}
.connectInfo {
float: left;
margin-top: 10px;
font-size: 15px;
color: #ffffff ;
}
.moreConnectInfo {
float: left;
margin-top: 6px;
font-size: 15px;
color: #ffffff;
}
</style>
</head>
<body>
<body style="background-color:black;">
<h1 style= "color:grey;font-size:50px;">dollas</h1>
<h2 style="color:white; font-size:25px;;">North Jersey</h2>
<hr>
<!-- business 2-->
<div class="product_img">
<img alt="KB's BBQ SMOKEHOUSE - IRVINGTON, NJ 07111 (Menu & Order
Online)" class="n3VNCb"
src="https://menufyproduction.imgix.net/637255010998628698+201756.png?
auto=compress,format&h=1080&w=1920&fit=max" data-noaft="1"
jsname="HiaYvf" jsaction="load:XAeZkd;" style="width: 200px; height:
150px; margin: 0px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">KB's BBQ Smokehouse</div>
<div class="clear"></div>
<div class="location">Location: 1077 Stuyvesant Ave, Irvington, NJ
07111</div>
<div class="clear"></div>
<div class="contactInfo">Phone: (973) 982-6528</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://kbbbqsmokehouse.com/ </div>
<div class="clear"></div>
</div>
<!-- business 3-->
<div class="product_img">
<img data-visualcompletion="media-vc-image" alt="May be an image of 1 person
and text that says 'Ard Bakery Arielitas'" class="ji94ytn4 r9f5tntg d2edcug0
r0294ipz" referrerpolicy="origin-when-cross-origin"
src="https://scontent.fewr1-
5.fna.fbcdn.net/v/t31.18172-
8/26198629_1997772167107826_8453467514730795477_o.jpg?_nc_cat=105&ccb=1-
3&_nc_sid=09cbfe&_nc_ohc=1EVQdCkudYUAX-
_oK4D&_nc_ht=scontent.fewr1-
5.fna&oh=db53b58b37272d072239b01f939d602f&oe=60B6C98F" style="width:
200px; height: 150px; margin-left: -300px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">Arielita's Bakery</div>
<div class="clear"></div>
<div class="location">Location:Montclair, NJ</div>
<div class="clear"></div>
<div class="contactInfo">To order:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
</div>
Check this below snippet. Its just an skeleton. It will help you to build such layout.
.product_wrapper {
}
.product_loop {
display : flex;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.product_image { background : #ccc; flex : 0 0 20%; height: 150px }
.product_content { flex : 1; padding: 10px }
<div class="product_wrapper">
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
</div>
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;
}
As you can see from the image the white border is hanging over the green body.
I want the white border to hide behind the green background so that panels touch the edge of column on both left/right side with no whitespace.
Code
body {
background-color: green;
margin: 0;
}
.home-panels {
font-size: 0;
margin-left: -2.5px;
margin-right: -2.5px;
margin-top: 2.5px;
margin-bottom: 2.5px;
}
.panel-default {
box-sizing: border-box;
border-style: none;
position: relative;
width: 50%;
padding-bottom: 40%;
overflow: hidden;
background-color: #446CB3;
border-radius: 0;
display: inline-block;
margin-bottom: 0px;
border: 2.5px white solid;
}
.panel-body {
color: white;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
font-size: 12px;
justify-content: center;
align-items: center;
display: flex;
}
<div class="home-panels">
<a href="/inspirations/25-asdf-asdf">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">asdf asdf</div>
</div>
</div>
</a>
<a href="/inspirations/4-to-to-to-to-to-to-to-to-to-to-to-to">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">to to to to to to to to to to to to</div>
</div>
</div>
</a>
<a href="/inspirations/24-asd">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">asd</div>
</div>
</div>
</a>
<a href="/inspirations/8-test">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">test</div>
</div>
</div>
</a>
</div>
remove extra margin from .home-panels and it is element body not class .body in CSS.
and you need to add
.home-panels a:nth-child(odd) .panel-default {
border-left: 0
}
.home-panels a:nth-child(even) .panel-default {
border-right: 0
}
Note that I added box-sizing:border-box to the wildcard selector * so it will apply to every selectors.
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: green;
margin: 0;
}
.home-panels {
font-size: 0;
}
.panel-default {
border-style: none;
position: relative;
width: 50%;
padding-bottom: 40%;
overflow: hidden;
background-color: #446CB3;
border-radius: 0;
display: inline-block;
margin-bottom: 0px;
border: 2.5px white solid;
}
.home-panels a:nth-child(odd) .panel-default {
border-left: 0
}
.home-panels a:nth-child(even) .panel-default {
border-right: 0
}
.panel-body {
color: white;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
font-size: 12px;
justify-content: center;
align-items: center;
display: flex;
}
<div class="home-panels">
<a href="/inspirations/25-asdf-asdf">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">asdf asdf</div>
</div>
</div>
</a>
<a href="/inspirations/4-to-to-to-to-to-to-to-to-to-to-to-to">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">to to to to to to to to to to to to</div>
</div>
</div>
</a>
<a href="/inspirations/24-asd">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">test</div>
</div>
</div>
</a>
<a href="/inspirations/8-test">
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link">test</div>
</div>
</div>
</a>
</div>
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.
I have a group of stats styled as shown below, but if I want to center the group, it will use the width of the descriptions that extend past and have a larger width. What's the easiest way to center according to the width of just the stat numbers and still have the descriptions below them?
.container {
text-align: center;
}
.stats {
display: block;
margin: 0 auto 30px auto;
}
.left-stats {
text-align: right;
display: inline-block;
margin-right: 40px;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: inline-block;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
I have a solution using your HTML and using display: table-cell instead of display: inline-block. Instead of a 40px margin to create the space between the columns, I added 20px left/right padding in the relevant elements.
Note that I added dotted blue borders for demonstration purposes, you can remove them.
.container {
text-align: center;
}
.stats {
display: table;
width: 100%;
margin: 0 auto 30px auto;
border: 1px dotted blue;
}
.left-stats {
text-align: right;
display: table-cell;
width: 50%;
padding-right: 20px;
border: 1px dotted blue;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: table-cell;
width: 50%;
padding-left: 20px;
border: 1px dotted blue;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
You mean something like this?
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
text-align: center;
}