What could be causing my inline-block divs to not line up correctly?

Presented below is the code snippet of my HTML:

.classWrap {
  text-align: center;
}

.classInd {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border: 2px solid #FFF202;
  border-radius: 10%;
  box-shadow: 0 0 15px 0 #FFF202;
  background-image: url(img/logos/logoSmall10.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.classTitle {
  text-align: center;
  font-family: bebaslight;
  margin-bottom: 0px
}

.classInd p {
  font-family: bebaslight;
  font-size: 13px;
  margin: 5px;
}

.line {
  border-top: .25px solid black;
  width: 75%;
  margin: 0 auto;
}
<div class="classWrap">
  <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1>
  <div class="classInd">
    <h3 class="classTitle">Body Sculpting</h3>
    <div class="line"></div>
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper, lower body, strengthen the sides of your waist and lower back, and transform your fitness routine.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Blitz</h3>
    <div class="line"></div>
    <p>Squeeze in optimum calorie burn with our quick 30-minute cardio blitz class. Challenge yourself to make this your warm-up routine!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Intro Training</h3>
    <div class="line"></div>
    <p>Learn fundamental iRock exercises and TRX Suspension Trainer techniques in a fun, engaging environment with our certified trainers. Get ready for transformative workouts!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Circuit Training</h3>
    <div class="line"></div>
    <p>Say goodbye to boring workout routines with our high-energy circuit training class. Blast fat, sculpt muscle, and engage in exclusive exercises only at iRock Fitness, Erie, PA.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">H.I.I.T. Abs</h3>
    <div class="line"></div>
    <p>Get that heart pumping with a rigorous high-intensity abs workout that targets core muscle groups effectively.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Cardio</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Strength</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Boot Camp</h3>
    <div class="line"></div>
    <p>Finally, achieve the desired results with our intense boot camp circuit. Be prepared to break a sweat!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Endurance</h3>
    <div class="line"></div>
    <p>Reach maximum heart rate levels as you pedal, step, jump, and row towards your fitness goals and weight loss journey.</p>
  </div>
</div>

I attempted to address the alignment issue by adding vertical-align: top to the "classWrap" class based on suggestions from other resources, but unfortunately, some elements remain shifted up or down.

htmlcss

Answer №1

To ensure proper alignment, make sure to include vertical-align:top in your .classInd styles.

.classWrap {
  text-align: center;
}

.classInd {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border: 2px solid #FFF202;
  border-radius: 10%;
  box-shadow: 0 0 15px 0 #FFF202;
  background-image: url(img/logos/logoSmall10.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align:top; /* Ensure top alignment */
}

.classTitle {
  text-align: center;
  font-family: bebaslight;
  margin-bottom: 0px
}

.classInd p {
  font-family: bebaslight;
  font-size: 13px;
  margin: 5px;
}

.line {
  border-top: .25px solid black;
  width: 75%;
  margin: 0 auto;
}
<div class="classWrap">
  <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1>
  <div class="classInd">
    <h3 class="classTitle">Body Sculpting</h3>
    <div class="line"></div>
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Blitz</h3>
    <div class="line"></div>
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Intro Training</h3>
    <div class="line"></div>
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Circuit Training</h3>
    <div class="line"></div>
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">H.I.I.T. Abs</h3>
    <div class="line"></div>
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Cardio</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Strength</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Boot Camp</h3>
    <div class="line"></div>
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Endurance</h3>
    <div class="line"></div>
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p>
  </div>
</div>

Answer №2

One issue with the vertical-align: top; declaration is that it was mistakenly applied to the container instead of the child elements. It should actually be set on the .classInd selector.

.classWrap {
  text-align: center;
}

.classInd {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border: 2px solid #FFF202;
  border-radius: 10%;
  box-shadow: 0 0 15px 0 #FFF202;
  background-image: url(img/logos/logoSmall10.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: top;
}

.classTitle {
  text-align: center;
  font-family: bebaslight;
  margin-bottom: 0px
}

.classInd p {
  font-family: bebaslight;
  font-size: 13px;
  margin: 5px;
}

.line {
  border-top: .25px solid black;
  width: 75%;
  margin: 0 auto;
}
<div class="classWrap">
  <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1>
  <div class="classInd">
    <h3 class="classTitle">Body Sculpting</h3>
    <div class="line"></div>
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Blitz</h3>
    <div class="line"></div>
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Intro Training</h3>
    <div class="line"></div>
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Circuit Training</h3>
    <div class="line"></div>
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">H.I.I.T. Abs</h3>
    <div class="line"></div>
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Cardio</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Strength</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Boot Camp</h3>
    <div class="line"></div>
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Endurance</h3>
    <div class="line"></div>
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p>
  </div>
</div>

Answer №3

My recommendation is to designate the height and width attributes for the 'classWrap' instead of the 'classInd' class. For 'classInd', you can set the height and width as 100%. Hopefully, this suggestion will be beneficial for you.

Answer №4

Consider incorporating the following elements:

.classInd:nth-of-type(even) {
float: right;
}

.classInd:nth-of-type(odd) {
float: left;
}


.classWrap {
  text-align: center;
}

.classInd {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border: 2px solid #FFF202;
  border-radius: 10%;
  box-shadow: 0 0 15px 0 #FFF202;
  background-image: url(img/logos/logoSmall10.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.classInd:nth-of-type(even) {
float: right;
}

.classInd:nth-of-type(odd) {
float: left;
}

.classTitle {
  text-align: center;
  font-family: bebaslight;
  margin-bottom: 0px
}

.classInd p {
  font-family: bebaslight;
  font-size: 13px;
  margin: 5px;
}

.line {
  border-top: .25px solid black;
  width: 75%;
  margin: 0 auto;
}
<div class="classWrap">
  <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1>
  <div class="classInd">
    <h3 class="classTitle">Body Sculpting</h3>
    <div class="line"></div>
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Blitz</h3>
    <div class="line"></div>
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Intro Training</h3>
    <div class="line"></div>
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Circuit Training</h3>
    <div class="line"></div>
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">H.I.I.T. Abs</h3>
    <div class="line"></div>
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Cardio</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">MX Strength</h3>
    <div class="line"></div>
    <p></p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Boot Camp</h3>
    <div class="line"></div>
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p>
  </div>
  <div class="classInd">
    <h3 class="classTitle">Cardio Endurance</h3>
    <div class="line"></div>
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to prevent the back button from functioning in Android devices

It's so frustrating always hitting a dead end and I really need a clear answer. How can I disable the hardware back button on my app? And where should I input the code to disable it? I simply want users of my app to navigate within the app without usi ...

androidjqueryhtmlcordova

Troubleshooting Bootstrap image alignment problem with columns on extra small screens

My website showcases screenshots of my software in a div element. Everything looks great on larger screens, but once I switch to a phone or resize the window, the images don't align properly, leaving empty space. Refer to the image below for clarifica ...

htmlcssimagetwitter-bootstrap-3alignment

Reducing image size using CSS can result in blurry images on multiple web browsers

Encountering challenges with downscaled images in multiple browsers... The images must be downscaled to adapt to the browser size. Here is the code snippet: #pic-holder img { -moz-transform: rotate(0deg); /*image-rendering:-webkit-optimize-contras ...

cssimagefirefoxsafari

Unable to view post in a single page

Having trouble with my Wordpress blog on mobile. I can't seem to open posts in a single page, as there is no response when clicking or touching the post on the main page. The div class for the main page post is entry-content. Here are some styling co ...

phpjquerycsswordpress

What is the process of integrating an HTML web component with an HTML file? Can I use innerHTML = foo("myfile.html") to achieve

Using HTML web components allows me to define their code using this method: this.innerHTML = `<h1></h1>`; However, I find it cumbersome as I do not have access to the Emmet Abbreviation feature which slows down my component creation process. ...

javascripthtmlinnerhtmlhtml-components

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

Sending data when button is clicked from Google Apps Script to sidebar

I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...

javascripthtmlgoogle-apps-script

Proper Placement of Required Field Validator Messages

I am having an issue with the validation text appearing behind my textbox instead of below it. Despite setting the display to block in the CSS class for the assignment type and start date, the validation text is not displaying properly. I have tried variou ...

c#htmlasp.netcss

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

javascripthtmlangularjs

What causes Chrome to crash when dealing with lengthy tail files?

My objective is to display a log file in real-time using a websocket connection. However, I am facing performance issues with Chrome when the paragraph ('p') element in the HTML becomes large (about 450 lines). This is the current implementation ...

javascripthtmltailapache-tailer

Converting coordinates to pixel-based fixed positioning in CSS

After creating an animated square pie chart using basic CSS to display it in a grid format, I am now looking to transform the larger squares into a state map grid. Any ideas on how to achieve this? In my JavaScript code snippet below, I believe there is a ...

javascripthtmlcsswaffle-chart

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

htmlcssreactjsbootstrap-4

How can I customize the styling of an SVG pseudo element using Font Awesome 5?

I've implemented font awesome 5 pseudo elements to attach an :after tag to my element as shown below: &:after { content: "\f068"; font-weight:400; color:$brandRed; float:right; font-family: "Font Awesome 5 Pro"; } The c ...

javascriptcssfont-awesomepseudo-elementfont-awesome-5

Restrict dropping items in HTML5 by only allowing the drop if the target div is

I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...

javascripthtml

Creating custom components in React

At times, I find myself in need of a special UI component such as a multiple range slider. However, I have a preference for not relying on third-party libraries, so I usually opt to create the component myself. As time has passed, I have completely stopped ...

htmlreactjsformsredux

Words hovering in a section next to a captivating picture

I am looking to achieve a specific arrangement: I want two different texts (in block format) to float or display inline next to an image, all within a div element. Despite trying various display settings (such as block and inline for text), I have not be ...

htmlcss

How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Is it possible to achieve a layout similar to this example: I've come across some online examples using different versions of bootstrap, but they tend to alter the css too much, making it harder to grasp the concepts of bootstrap. I am curious if it ...

htmlcsstwitter-bootstrapbootstrap-4web-frontend

What is the proper way to add comments within CSS code inline?

Can anyone provide instructions on how to comment an inline css property, such as height, in the following code snippet? <div style="width:100%; height:30%;"> Any help is appreciated. Thank you! ...

csscomments

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as exp ...

javascriptcssreactjsnext.jsaccordion