inline-block div elements not vertically aligned when content is added
inline-block div elements not vertically aligned when content is added
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<link rel="stylesheet" href="Team.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Karla|Montserrat" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/textition.js"></script>
<link rel="stylesheet" href="SparkHome.css">
<link rel="stylesheet"href="Event.css">
<script type="text/javascript">
</script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="mainWrapper">
<div class="main">
<nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
<a class="navbar-brand ml-0">
<h1 style="
font-size:40px;
color: white;
" class="d-lg-none"> Logo</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pt-2 pb-2">
<li class="nav-item mt-0" id="navItems">
<a href="SparkHome.html">Home</a>
</li>
<li class="nav-item mt-0" id="navItemsActive">
<a href="#">The Team</a>
</li>
<li class="nav-item mt-0" id="navItems">
The Event
</li>
<li class="nav-item mt-0" id="navItems">
<a href="https://docs.google.com/forms/d/1WpEQ4nF4y-mGUiz2hv1gEH-D58_j0pEWGttdfEhsdqQ/viewform?edit_requested=true" target="-_blank">Volunteer</a>
</li>
<li class="nav-item mt-0" id="navItems">
<a href="https://docs.google.com/forms/d/e/1FAIpQLScC9lS7uMstAmGXrQ41g0uEe3qXmmHHmipvOd1Rzae6LEEB2Q/viewform"target="_blank">Register</a>
</li>
</ul>
</div>
</nav>
<h1 class="heading">The Event</h1>
<hr class="headingHR">
<div class="block">
<h1 class="eventTitle">
Cubing
</h1>
<p class="eventContent">
The real reason behind the creation of this organisation. We founder members are passionate cubers, in need of a platform to learn and show our skills. This thirst created our organisation.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Surprise
</h1>
<p class="eventContent">Do you think that we'll tell you right now? Be there to witness the excitement.<br>EXPECT THE UNEXPECTED </p>
</div>
<div class="block">
<h1 class="eventTitle">
Logic Solving
</h1><p class="eventContent">
This event consists of 2 rounds. The first is a paper-based round that tests your logic and decision-making skills. The second is an actual, physical puzzle.
</div>
<br>
<div class="block">
<h1 class="eventTitle">
Horcrux Hunt
</h1>
<p class="eventContent"> In its first ever appearance at SPARK, participate in The Horcrux Hunt, scavenging for treasure items stowed away in the campus grounds.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Fortnite
</h1>
<p class="eventContent">
With a staggering 125 million active players, Fortnite is THE hottest game on the market right now.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
MCU event
</h1>
</div>
</div>
</body>
</html>
This is how my page looks like when I add some content in the divs.
.block
margin-top: 50px;
height:300px;
margin-left: 30px;
width: 300px;
background-color: transparent;
border:2px solid white;
padding: 10px;
display: inline-block;
text-align: center;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
border-radius:20px;
margin-bottom: 50px;
.main
text-align: center!important;
@media only screen and (max-width: 600px)
.block
height: 300px;
width: 300px;
margin-left:0;
margin-right: 0;
margin-top: 30px;
.eventTitle
font-family: 'Montserrat',sans-serif;
margin-top: 20px;
color: white;
font-size: 25px;
@keyframes fadeIn
from opacity: 0;
to opacity: 1;
.eventContent
color: white;
margin-top:10px;
font-family: 'Montserrat',sans-serif;
font-size: 17px;
When there is no content in the .block class, the divs are arranged and spaced evenly. However, as I add content (.eventContent class), the divs (.block) go haywire. They are set as display:inline-block. How might I go about getting the divs with content to be evenly spaced and arranged?
.block
.eventContent
.block
display:inline-block
@LelioFaieta done. Thanks!
– nirbhay
Aug 22 at 13:06
2 Answers
2
The problem is not in the margins, it is the vertical alignment of the <div> elements.
<div>
You should add this to your styles:
.block vertical-align: top
Depending on exactly how you want the vertical placement to work, you might change that to vertical-align: text-top. See the CSS specs for details.
(NOTE the default is vertical-align: baseline, which aligns the bottom of the last line of text in each box to its neighbors).
vertical-align: text-top
vertical-align: baseline
The elements which have class .block have display: inline-block applied to them. The default vertical alignment for inline-blocks is baseline (i.e the last text lines in the blocks are aligned)
.block
display: inline-block
baseline
So just add vertical-align: top to the CSS for the .block class to force their contents to the top and align them as desired.
vertical-align: top
.block
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
do you mind to share the html too? you can create a snippet with <> instead of just pasting code
– Lelio Faieta
Aug 22 at 13:00