This question already has answers here:
how to add vertical line between two divs
(6 answers)
Closed 3 years ago.
I'm trying to divide the content of a webpage in two parts. The left side for a navbar and the right side for the main content of the page. I'm trying to use hr tag to create a line and divide the two parts but I'm having problems.
This is the HTML code:
<div id="left_content">
<nav class="main-menu">
<ul>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">Stars Components</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="vertical-line" style="height: 500px;"></div>
<div id="right_content>
...
</div>
This is the CSS code:
div.vertical-line{
width: 0px;
height: 100%;
float: left;
border: 1px inset;
background-color: #eeeeee;
margin-left: 250px;
}
This is one screenshot of the problem.
Any suggestion? Thanks for reading.
Here is the minimal layout technique with modern flexbox layout
.split-layout {
display: flex;
flex-direction: column;
}
#media screen and (min-width: 30em) {
.split-layout {
flex-direction: row;
align-items: stretch;
}
}
.split-layout__item {
flex: 1;
}
#media screen and (min-width: 30em) {
.split-layout__item {
padding-left: 1em;
}
.split-layout__item:first-child {
padding: 0;
}
}
.split-layout__divider {
display: flex;
flex-direction: row;
align-items: center;
}
#media screen and (min-width: 30em) {
.split-layout__divider {
flex-direction: column;
}
}
.split-layout__label {
padding: 1em;
}
.split-layout__rule {
flex: 1;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
border-width: 1px 0 0 0;
}
#media screen and (min-width: 30em) {
.split-layout__rule {
border-width: 0 1px 0 0;
}
}
/* =DEMO STYLES
--------------------------------------------------------------------*/
html {
padding: 2em;
background: #3B4558;
color: #fff;
}
<div class="wrapper">
<div class="split-layout">
<div class="split-layout__item">
<h2>Navigation</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus? In beatae hic tenetur molestiae facilis illo neque esse repellendus harum. A, consequatur, labore.
</p>
</div>
<div class="split-layout__divider">
<div class="split-layout__rule"></div>
<div class="split-layout__rule"></div>
</div>
<div class="split-layout__item">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus?
</p>
</div>
</div>
</div>
Use CSS grid. CSS grid is great for content layout.
body {
font-family: Tahoma, sans-serif;
}
.grid {
display: grid;
grid-template-areas: 'cell-navbar cell-content cell-content cell-content';
}
.cell-navbar {
grid-area: cell-navbar;
border-right: thin solid #ccc;
}
.cell-content {
grid-area: cell-content;
}
body,
main,
.cell-navbar,
.cell-content {
height: 100vh;
}
<main class="grid">
<div class="cell-navbar">Navbar</div>
<div class="cell-content">Content</div>
</main>
More on CSS grid:
enter link description here
Try adding the following line to your CSS style
#left_content, #right_content { float:left; }
my preferred way of doing this,
<style>
#content { height: 100%; }
#left_content, #right_content {
float:left;
}
#left_content {
width:300px;
}
#right_content {
height:inherit;
padding-left:30px;
border-left:2px solid #000;
}
</style>
<body>
<div id="content">
<div id="left_content">
left side content goes here
</div>
<div id="right_content">
right side content goes here
</div>
</div>
</body>
Use flexbox instead, and draw the vertical line as border-right on #left_content:
.container{
display:flex
}
#left_content{
border-right: solid 1px #333;
padding-right:20px;
}
#right_content{
flex: 1 1 100%;
background-color: lightblue;
padding-left:20px;
}
<div class="container">
<div id="left_content">
<nav class="main-menu">
<ul>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">Stars Components</span>
</a>
</li>
</ul>
</nav>
</div>
<div id="right_content">
...
</div>
</div>
Related
I'm trying to have 2 paragraphs, one below the other with different styling, and an image next to them and aligned with them in flexbox.
I cannot seem to get it to align next to the items. Currently, I have the image flex-end aligned to the right and the text on the left, but I need them to be together.
I have tried moving them in and out of being the same div but I'm just getting nowhere. I'm not sure what I need to do to get the placeholder image next to the hero-container text.
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: black;
}
div.Hero-container {
display: flex;
flex-direction: column;
width: 80%;
}
p {
display: flex;
}
p.intro-text {
order: 1;
color: #f9faf8;
font-weight: bold;
font-size: 48px;
align-self: left;
width: 80%;
}
p.secondary-text {
order: 3;
color: #e5e7eb;
font-size: 18px;
}
img {
margin-right: 10px;
width: 350px;
height: 150px;
}
.image-container {
display: flex;
flex-direction: row;
justify-content: right;
height: 72px;
padding: 10px 0;
}
<div class="header">
<header class="Hero">Header Logo</header>
<ol>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ol>
</div>
<div class="Hero-container">
<p class="intro-text">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</p>
<p class="secondary-text">Blah blah Blah</p>
</div>
<div class="image-container">
<img src="https://via.placeholder.com/350x150" alt="Placeholder Image">
</div>
You need another container to wrap around the text to make it easier on yourself. The new .hero-text-container element has a flex width calculated to 100% - 350px because your image is 350px so the calc can take care of the text container size. I also recommend cleaning up some unnecessary flex displays on the children, like the .image-container that only has one child element. Add align-items: center; to .hero-text-container if you want the image to be vertically aligned middle
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: black;
}
.hero-container {
display: flex;
width: 100%;
}
.hero-text-container {
flex: 0 0 calc(100% - 350px);
max-width: calc(100% - 350px);
}
p {
margin: 0;
}
p.intro-text {
color: #F9FAF8;
font-weight: bold;
font-size: 48px;
}
p.secondary-text {
color: #e5e7eb;
font-size: 18px;
}
.image-container {
height: 72px;
padding: 10px 0;
}
img {
width: 350px;
height: 150px;
}
<html>
<body>
<div class="header">
<header class="Hero">Header Logo</header>
<ol>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ol>
</div>
<div class="hero-container">
<div class="hero-text-container">
<p class="intro-text">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</p>
<p class="secondary-text">Blah blah Blah</p>
</div>
<div class="image-container">
<img src="https://via.placeholder.com/350x150" alt="Placeholder Image">
</div>
</div>
</body>
</html>
so I was making a dashboard page for this bot and the page looks good on desktop , but isn't responsive on mobile devices.
THE PAGE ON DESKTOP
THE PAGE ON MOBILE DEVICES
THE CODE FOR PAGE
HTML
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link id="theme" href="/static/css/light.css" aria-labelledby="dark" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">
<title>Steve.</title>
</head>
<body>
<nav class="navbar navbar-expand-lg text-div">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<img id="navbar_dicord_brand" src="/static/images/discord_logo_black.svg" width="120" height="60">
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
<a class="spacing" style="padding-right:.5em" href="#"></span><strong>Commands</strong></a>
<span id="number_badge" class="top-0 start-100 translate-middle badge rounded-pill" style="background-color: crimson;">16<span class="visually-hidden">unread messages</span>
</li>
<li><a class="spacing" href="https://top.gg/bot/834409783502438480/invite/"><strong>Invite</strong></a></li>
<li><a class="spacing" href="https://discord.gg/JEDu42vVBX"><strong>Support Server</strong></a></li>
<li><a class="spacing" href="https://www.patreon.com/ks47"><strong>Patreon</strong></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand a_text" href="https://top.gg/bot/834409783502438480">
<img src="/static/images/avtar.webp" width="45" height="45">
<strong>Steve.</strong>
</a>
</ul>
</div>
</nav>
<div class="body_container">
<div>
<center>
<div class="container text-div" style="width: fit-content;" >
<h1 class="display1 text_font">Anime and Manga in your Discord Server.</h1>
</div>
</center>
<div class="container text-div" style="margin-top:3%">
<div class="row">
<div class="col" style="text-align: left;">
<h1 class="display1"><img id="clyde_icon" src="/static/images/icon_clyde_black_RGB.svg" width="45px" height="45px"> {{count}} Guilds</h1>
</div>
<div class="col" style="text-align: center;">
<h1 class="display1"><img id="hash_icon" src="/static/images/hashtag.svg" width="45px" height="30px">{{channels}} Channels</h1>
</div>
<div class="col" style="text-align: right;">
<h1 class="display1"><img id="user_icon" src="/static/images/user_svg.svg"> {{users}} Users</h1>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase font-weight-bold">Footer text 1</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita sapiente sint, nulla, nihil
repudiandae commodi voluptatibus corrupti animi sequi aliquid magnam debitis, maxime quam recusandae
harum esse fugiat. Itaque, culpa?
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-6 mb-md-0 mb-3">
<h5 class="text-uppercase font-weight-bold">Footer text 2</h5>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio deserunt fuga perferendis modi earum
commodi aperiam temporibus quod nulla nesciunt aliquid debitis ullam omnis quos ipsam, aspernatur id
excepturi hic.
</p>
</div>
</div>
</div>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>
CSS 1
.spacing{
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
text-decoration: none;
font-size: 20px;
}
a.spacing{
padding-left: 1.5em;
padding-right: 1.5em;
}
a.spacing:hover{
color: crimson;
}
.text_font{
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande','sans-serif';
}
.body_container{
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande','sans-serif';
font-size: 2vw;
}
CSS 2
body{
background-color: white;
background-image:url(/static/images/background1.jpg);
background-size: cover;
color: black;
}
.a_text{
color:rgb(0, 0, 0);
font-family: Whitney,'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
}
a.a_text:hover{
color: crimson;
text-decoration: none;
}
.footer{
background-color:rgba(247, 247, 247, 0.884);
color: black;
margin-top: 10%;
padding-bottom: 2%;
position: fixed;
bottom: 0;
}
.text-div{
background-color: rgba(247, 247, 247, 0.882);
color: black;
}
.spacing{
color: black;
}
So I need to make sure that the divs in nav bar are responsive I TRIED Some #media queries but didn't got the desired results so is there a way that the navbar can be responsive and the center div objects would appear like a list
something like the image below
This is a simple example... But before...
Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the head section in your code -> Viewport Meta Tag.
Don't use <center> element to center content:
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
sourse: MDN - Center Element
Use flexbox, grid or positioning property -> Center Anything is CSS.
Some elements in your code (in navbar) doesn't have a closing tag.
The Code:
Open code in full screen and resize the window.
var burger = document.querySelector('.burger');
var list_container = document.querySelector('.list-container');
burger.addEventListener('click', () => {
list_container.classList.toggle('active');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {list-style-type: none;}
a {text-decoration: none;}
.navbar-container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
position: relative;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#media (min-width: 576px) {.navbar-container {max-width: 100%;}}
#media (min-width: 768px) {.navbar-container {max-width: 760px;}}
#media (min-width: 992px) {.navbar-container {max-width: 960px;}}
#media (min-width: 1200px) {.navbar-container {max-width: 1180px;}}
header {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafafa;
border: 1px solid #eee;
height: 80px;
z-index: 999;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logo-container a:link,
.logo-container a:visited {
display: flex;
justify-content: center;
align-items: center;
color: #151515;
}
.logo-container ion-icon {
color: #151515;
margin-right: 5px;
font-size: 40px;
}
.logo-container span {
font-size: 30px;
}
.list-container {
transition: all 0.2s;
}
.list-container.active {
transform: translateX(0);
}
.list-container ul {
display: flex;
}
.list-container ul li {
margin: 0 15px;
}
.list-container ul li a:link,
.list-container ul li a:visited,
.brand-container a:link,
.brand-container a:visited {
color: #151515;
font-weight: 600;
font-size: 20px;
}
.burger {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
display: none;
}
.burger span {
display: block;
width: 30px;
height: 4px;
background-color: #121212;
}
.burger span:not(:last-of-type) {
margin-bottom: 5px;
}
#media screen and (max-width:992px){
.list-container ul li a:link,
.list-container ul li a:visited {
font-size: 18px;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden;
}
.burger {
display: block;
}
.brand-container {
display: none;
}
.list-container {
position: fixed;
width: 100vw;
height: 100vh;
background-color: #fafafa;
top: 80px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: translateX(-100%);
}
.list-container ul {
flex-direction: column;
padding: 20px 10px;
}
.list-container ul li {
margin: unset;
}
.list-container ul li {
margin: 0 0 30px 0;
}
}
<script type="module" src="https://unpkg.com/ionicons#5.4.0/dist/ionicons/ionicons.esm.js"></script>
<header>
<nav class="navbar navbar-container">
<div class="logo-container">
<a href="#">
<ion-icon name="logo-discord"></ion-icon>
<span>Discord</span>
</a>
</div>
<div class="list-container">
<ul class="list">
<li>Commands</li>
<li>Invite</li>
<li>Support Server</li>
<li>Patreon</li>
</ul>
</div>
<div class="brand-container">
<a href="#">
<img src="..." alt="...">
<span>Steve</span>
</a>
</div>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
Use flexbox with #media queries, it will help you. Change the flex-direction from raw to column on mobile device width. :)
I have the same images set up within a container. I have set up a width (it´s suppose that this has to apply both of them) but in the end the right one looks bigger BUT this happens when it gets to the #media (min-width:1024px). I believe this is related with responsive. While we have the images under that size and in display: block is OK. When it turns display:flex the problem begins. Please anybody help me with this issue. It doesn´t has any sense. (evidence attached)
HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<title>Balance-Salud Mental</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-
scale=1, minimun-scale=1"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesiones
adecuados. "/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap"
rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap"
rel="stylesheet"/>
</head>
<body>
<header>
<div class="contenedor">
<a href="index.html">
<img src="img/logo.png" class="brand" alt="Salud Mental Peru">
</a>
<input type="checkbox" id="menu-bar">
<label class="icon-menu-outline" for="menu-bar"></label>
<nav class="menu">
¿Quienes Somos?
Nuestros Profesionales
Consultas y Citas
Artículos
</nav>
</div>
</header>
<main>
<section id=profesionales>
<h2>Conócenos</h2> <br>
<div class="contenedor">
<div class="doctor">
<h3>Manuel Mallqui Babilon</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti sed distinctio
dolore. Veniam dicta error officiis sed. Aut, mollitia.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
<div class="doctor">
<h3>Manuel Mallqui Ñamot</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, vero ex accusamus
temporibus maiores esse nihil facilis iusto laudantium aliquid.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
</div>
</section>
</main>
<footer>
<div class="contenedor">
<p>2018-2020 Balance Salud Mental © - Designed by Watermelon</p>
</div>
</footer>
</body>
</html>
CSS CODE
#import url(menu.css);
#import url(slider.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152'
height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff'
fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-
42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82
30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-
18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54
0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-
2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30
50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header {
width: 100%;
height: 80px;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.contenedor {
width: 98%;
margin: auto;
}
.brand {
width: 160px;
margin: 3px 10px;
}
section {
width: 100%;
margin-bottom: 25px;
}
/*QUIENES SOMOS*/
#quienes_somos {
text-align: center;
margin-top: 100px;
padding: 20px;
}
/*NUESTROS PROFESIONALES*/
#profesionales {
border: 1px solid red;
text-align: center;
margin-top: 100px;
}
#profesionales .contenedor {
border: 1px solid black;
display: block;
justify-content: center;
}
.doctor {
margin: 20px;
}
.doctor img {
width: 100%;
max-width: 500px;
padding: 10px;
}
/*FOOTER*/
footer .contenedor {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
font-size: small;
margin-bottom: 50px;
margin-top: 250px;
}
#media (min-width:1024px) {
.contenedor {
width: 1000px;
}
#profesionales .contenedor {
display: flex;
}
}[enter image description here][1]
The images' width is 100%, but the width of their siblings <p></p> is not set. The content of two <p> has different length. That is why they make the widths of their parents <div class="doctor> different.
The solution could be to add to the .doctor rule a new one: width: 50%.
I hope I have nudged you into understanding the problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm at a loss here, I've been trying various things for a couple hours trying to get some text to center itself vertically in another div when it is only one line. When there are multiple times, it looks great and wraps beautifully.
Here is a photo of what I'm talking about:
photo
How can I fix the first instance (one line only) so it is centered vertically in the box? Here's a bootply.
Thank you!
Wrap the text you want to center in an HTML element and center that element using flexbox:
.list-item {
min-height: 52px;
border: 1px solid #E0E0E0;
display: flex;
align-items: stretch;
margin: 5px 0;
}
.list-item-status-container {
padding-right: 10px;
display: flex;
align-items: stretch;
border-left: 6px solid #90CAF9;
background-color: #E3F2FD;
max-width: 300px;
white-space: nowrap;
}
.list-item-status-content {
padding-left: 10px;
padding-right: 8px;
margin-top: auto;
margin-bottom: auto;
}
.list-item-content {
font-size: 17px;
display: block;
vertical-align: middle;
font-weight: 500;
padding-left: 8px;
padding-right: 8px;
display: flex;
flex-direction: column;
}
.list-item-content p,
.list-item-status-content > div {
margin-top: auto;
margin-bottom: auto;
}
.list-item-content > div {
width: 200px;
}
.item-unchecked-box {
color: #BDBDBD;
padding-right: 8px;
display: inline-block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<div class="list-item">
<div class="list-item-status-container">
<div class="list-item-status-content">
<div>
<div class="item-unchecked-box">
<i class="fas fa-square fa-lg"></i>
</div>
Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
</div>
</div>
</div>
<div class="list-item-content">
<p>This should be vertically centered if there is room.</p>
</div>
</div>
<div class="list-item">
<div class="list-item-status-container">
<div class="list-item-status-content">
<div>
<div class="item-unchecked-box">
<i class="fas fa-square fa-lg"></i>
</div>
Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
</div>
</div>
</div>
<div class="list-item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, esse deleniti odio fugiat culpa excepturi enim omnis laborum distinctio officia odit laudantium aliquid sint, ad expedita alias. Voluptatem, eveniet, odio.</p>
</div>
</div>
You need to add text-center like below
<div class="list-item-content text-center">
This should be vertically centered if there is room
</div>
</div>
I'm assuming that you are using bootstrap?
You need css to set the parent container to display: table; then the container as display:table-cell;
.list-item-content{
height: 350px; width: 250px; background-color:#F1F1F1;
display: table;
}
.list-item-content .cell{
display:table-cell; text-align: center; vertical-align: middle;
}
<div class="list-item-content">
<div class='cell'>
This should be vertically centered if there is room
</div>
</div>
.list-item-content {
display: flex;
align-items: center;
min-height: 52px;
}
<div class="list-item-content">
This should be vertically centered if there is room
</div>
Since you set the min-height of .list-item to be 52px, that means it's also safe to assume .list-item-context min-height is also 52px.
I'm trying to vertically align content inside column relatively to it's inline column, which is higher.
It's pretty hard for me to explain in words, so:
Here's the HTML structure.
<div class="row">
<div class="col-sm-7">
<div class="i-need-to-be-in-the-middle">
<!--some content-->
</div>
</div>
<div class="col-sm-5">
<div class="btns">
<button>
first btn
</button>
<button>
second btn
</button>
<button>
third btn
</button>
</div><!--btns-->
</div>
</div><!--.row-->
Here's how it looks like:
Here's the desire result:
I've tried a lot of solutions, but the only solutions which work for me made a mess with boostrap because they involved absolute or flexing elements.
I've also notice that the height of the first col is relative to the content length, which is less then the height of the button.
What is required is to make the columns the same height and then align the content in the center of each column
Flexbox Method
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
}
button {
margin: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-7 column">
<div class="i-need-to-be-in-the-middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
</div>
</div>
<div class="col-sm-5 column">
<div class="btns column">
<button>
first btn
</button>
<button>
second btn
</button>
<button>
third btn
</button>
</div>
<!--btns-->
</div>
</div>
<!--.row-->
</div>
Codepen Demo
CSS Tables Method
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.table {
display: table;
}
.column {
float: none;
/* remove bootstrap default */
display: table-cell;
vertical-align: middle;
border: 1px solid grey;
justify-content: center;
}
button {
display: block;
margin: .5em auto;
width: 95%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row table">
<div class="col-sm-7 column">
<div class="i-need-to-be-in-the-middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
</div>
</div>
<div class="col-sm-5 column">
<div class="btns">
<button>
first btn
</button>
<button>
second btn
</button>
<button>
third btn
</button>
</div>
<!--btns-->
</div>
</div>
<!--.row-->
</div>
Codepen Demo
Try this:
<div class="center-vertically">
<p>
I'm vertically aligned.
</p>
</div>
The CSS:
.center-vertically{
vertical-align: middle;
}
Looks like your having some grid troubles, try something like this:
HTML:
<body>
<div class="row header">
<div class="column column-2">Logo</div>
<div class="column column-4">-</div>
<div class="column column-6">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="row middle">
<div class="column column-2">Left-</div>
<div class="column column-8">So much content.</div>
<div class="column column-2">Right-</div>
</div>
<div class="row footer">
<div class="column column-12">(c) 2016</div>
</div>
</body>
CSS:
.row {
border: 2px solid rebeccapurple;
}
.column {
border: 2px solid blue;
margin: 1%;
float: left;
border-radius: 20px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.row,
.column {
box-sizing: border-box;
}
.column-1 {
width: 6.333%;
}
.column-2 {
width: 14.66%;
}
.column-3 {
width: 23%;
}
.column-4 {
width: 31.33%;
}
.column-5 {
width: 39.66%;
}
.column-6 {
width: 48%;
}
.column-7 {
width: 56.33%;
}
.column-8 {
width: 64.66%;
}
.column-9 {
width: 73%;
}
.column-10 {
width: 81.33%;
}
.column-11 {
width: 89.66%;
}
.column-12 {
width: 98%;
}
.header > .column,
.footer > .column {
padding: 25px;
}
.middle > .column {
height: 400px;
line-height: 400px;
}
.header ul {
margin: auto;
}
.header li {
display: inline-block;
list-style-type: none;
}
All you will have to do is edit the size in CSS for each grid element and you should be good!