Tips for vertically aligning <p> and <div> elements without using the table-cell property

I am trying to align my text vertically in the middle using a ch-grid <div> (the circle color element).

Is it possible to achieve this without specifying a display attribute for the <p> element? I plan to hide it by setting display:none initially and then fadeIn later.

I have attempted various solutions without success. Any help would be greatly appreciated.
Here is my current code:

<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-3 col-md-push-6">
    <div class="ch-grid">
           <p>Who are we?</p>            
         <div class="ch-item ch-img-1">
             <div class="ch-info ch-info-1">
               <i class="fa fa-user fa-5x" aria-hidden="true"></i>
             </div>
         </div>
      </div>
   </div>
</div>
</div>

And here is the CSS:

body{
padding-top: 100px; 
height: 100%;
font-family: helvetica, sans-serif, verdana;
}

.ch-grid {
position: relative;
text-align: center;
margin-bottom: 5vh;
width:400px;
height: 100px;
display: inline-block;
vertical-align: middle;
}

.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
}

.ch-grid:after {
  clear: both;
 }

.ch-item {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 position: absolute;
 margin-left: 200px;
 overflow: hidden;
 cursor: default;
 box-shadow: 
    inset 0 0 0 16px rgba(255,255,255,0.6),
    0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }

p {
 width: 100px;
 vertical-align: middle;
}
 .ch-img-1 { 
 background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload /c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artisticwallpaper4.jpg");
}   

.ch-info {

background: rgba(218, 173, 77, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
 }

.ch-info-2{
 background: rgba(157, 151, 138, 0.8);
 }

 .ch-info-3{
 background: rgba(126, 154, 220, 0.8);
 }

 .ch-info-4{
background: rgba(76, 166, 37, 0.8);
  }

.ch-info i {
margin-top: 15px;
color: white;
}

.ch-item:hover {
box-shadow: 
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}

https://jsfiddle.net/Chainervk/qg7en3cs/

htmlcss

Answer №1

Have you considered the drawbacks of using flexbox with align-items:center? Check out this example: https://jsfiddle.net/qg7en3cs/5/. It showcases how it aligns the direct children of the container without requiring changes to their display value.

Furthermore, can you explain the purpose of

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

in your original demonstration? It resembles the 'micro clearfix' hack, typically used when layouts are structured with floats. However, I don't see any floats in your demo. Can you provide more insight?

Answer №2

Insert 

top:50%; transform: translateY(-50%);
into the p tag to achieve vertical alignment in the center

position: relative;
top: 50%;
margin: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Demo:-

body{
padding-top: 100px; 
height: 100%;
font-family: helvetica, sans-serif, verdana;
}

.ch-grid {
    position: relative;
    
    text-align: center;
   margin-bottom: 5vh;
   width:400px;
   height: 100px;
   display: inline-block;
vertical-align: middle;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-left: 200px;
    overflow: hidden;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}
p {
  
width: 100px;
vertical-align: middle;
  position: relative;
  top: 50%;
  margin:0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  
}
.ch-img-1 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artistic-wallpaper4.jpg");
}   

.ch-img-2 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_41,w_100/v1479836446/Bike%20page/Fantastic-Artistic-Pictures5.jpg");

}

.ch-img-3 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_43,w_100/v1479836455/Bike%20page/Artistic-Pictures-HD.jpg");
}

.ch-img-4 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_31,w_100/v1479836467/Bike%20page/Artistic-Images-For-Desktop2.jpg");
}

.ch-info {

    background: rgba(218, 173, 77, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.ch-info-2{
     background: rgba(157, 151, 138, 0.8);
}

.ch-info-3{
    background: rgba(126, 154, 220, 0.8);
}

.ch-info-4{
    background: rgba(76, 166, 37, 0.8);
}

.ch-info i {
    margin-top: 15px;
    color: white;
}

.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}
<div class="container">
    <div class="row">
    <div class="col-xs-12 col-md-3 col-md-push-6"> 
           
          <div class="ch-grid">
               <p>Who are we?</p>         
     <div class="ch-item ch-img-1">
     <div class="ch-info ch-info-1">
   <i class="fa fa-user fa-5x" aria-hidden="true"></i>
 </div>
     </div>
      </div>
        <div class="ch-grid">
           <p>Bikes!</p>
         <div class="ch-item ch-img-2 ">
     <div class="ch-info ch-info-2">
     <i class="fa fa-bicycle fa-5x" aria-hidden="true"></i>
 </div>
     </div>
      </div>

          <div class="ch-grid">
          <p>Parts.</p>
        <div class="ch-item ch-img-3">
     <div class="ch-info ch-info-3">
  <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
    </div>
     </div>
      </div>
    
      <div class="ch-grid">
        <p>Why ride?</p>
       <div class="ch-item ch-img-4">
     <div class="ch-info ch-info-4">
  <i class="fa fa-arrows fa-5x" aria-hidden="true"></i>
    </div>
     </div>
      </div>
                  
       </div>
    </div>
</div>

Answer №3

To adjust the positioning of the div.ch-item, you need to move it upwards.

.ch-item {
    margin-top: -75px;
}

Below is the snippet of code:

body {
  padding-top: 100px;
  height: 100%;
  font-family: helvetica, sans-serif, verdana;
}
.ch-grid {
  position: relative;
  text-align: center;
  margin-bottom: 5vh;
  width: 400px;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}
.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
}
.ch-grid:after {
  clear: both;
}
.ch-item {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  margin-left: 200px;
  overflow: hidden;
  cursor: default;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
  margin-top: -75px;
}
p {
  width: 100px;
  vertical-align: middle;
}
.ch-img-1 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artistic-wallpaper4.jpg");
}
.ch-img-2 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_41,w_100/v1479836446/Bike%20page/Fantastic-Artistic-Pictures5.jpg");
}
.ch-img-3 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_43,w_100/v1479836455/Bike%20page/Artistic-Pictures-HD.jpg");
}
.ch-img-4 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_31,w_100/v1479836467/Bike%20page/Artistic-Images-For-Desktop2.jpg");
}
.ch-info {
  background: rgba(218, 173, 77, 0.8);
  width: inherit;
  height: inherit;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  transform: scale(0);
}
.ch-info-2 {
  background: rgba(157, 151, 138, 0.8);
}
.ch-info-3 {
  background: rgba(126, 154, 220, 0.8);
}
.ch-info-4 {
  background: rgba(76, 166, 37, 0.8);
}
.ch-info i {
  margin-top: 15px;
  color: white;
}
.ch-item:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
  transform: scale(1);
  opacity: 1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-3 col-md-push-6">

        <div class="ch-grid">
          <p>Who are we?</p>
          <div class="ch-item ch-img-1">
            <div class="ch-info ch-info-1">
              <i class="fa fa-user fa-5x" aria-hidden="true"></i>
            </div>
          </div>
        </div>
        <div class="ch-grid">
          <p>Bikes!</p>
          <div class="ch-item ch-img-2 ">
            <div class="ch-info ch-info-2">
              <i class="fa fa-bicycle fa-5x" aria-hidden="true"></i>
            </div>
          </div>
        </div>

        <div class="ch-grid">
          <p>Parts.</p>
          <div class="ch-item ch-img-3">
            <div class="ch-info ch-info-3">
              <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
            </div>
          </div>
        </div>

        <div class="ch-grid">
          <p>Why ride?</p>
          <div class="ch-item ch-img-4">
            <div class="ch-info ch-info-4">
              <i class="fa fa-arrows fa-5x" aria-hidden="true"></i>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

</html>

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

Tips for effectively utilizing the count() function within selenium's xpath feature?

By utilizing the count() function within XPath, we can extract the total count of matching nodes instead of using findElements() and size() methods. Do you know if the count function in XPath returns an integer value? For example, Let's say my xpath ...

htmlxmlseleniumxpath

Adjust the size of an image based on the smaller dimension utilizing CSS

Allowing users to upload images that are displayed in a square container in the UI presents challenges. The uploaded images can vary in size, aspect ratio, and orientation, but they should always fill the container and be centered. To address this issue, ...

cssimagedynamic

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

Printing long contents on Chrome's ion-modal-view is not supported on every page

I have tried various solutions found in articles but have not been successful. Here is an example of one such attempt: @media print { .modal { position: absolute; left: 0; top: 0; margin: 0; padding: 0; visibility: visible; / ...

javascriptcssprintingmodal-dialogionic-v1

Tips for maintaining consistent image dimensions while resizing your browser window

I'm having trouble preventing an image from resizing when I adjust the browser size. If you click on this link and try resizing your browser, you'll see what I mean - the image stays the same. I've attempted various methods but haven't ...

htmlcss

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

javascripthtmlcssp5.js

Constructor for 'dojox.mobile.RoundRectCategory' could not be located

Using Worklight 5.06 and Dojo 1.8, I encountered the following errors on the browser's console after an Eclipse crash: Error: Unable to resolve constructor for 'dojox.mobile.RoundRectCategory' Error: Left list not found Error: this.leftLis ...

htmldojoibm-mobilefirstdojox.mobile

"Struggling to upload an image using Selenium WebDriver because the element is not visible? Here are

ff.findElementByxpath(//object[@ id='slPlugin2']).click(); The element is not being recognized. Can you also provide guidance on how to upload media through webdriver? <table class="imgTable photoTable" cellspacing="0"> <div id="file ...

htmlselenium

What is the best way to redirect in PHP depending on the operating system?

Looking for a simple QR code script implementation that redirects users based on their operating system. Here's what I need: User visits URL Script detects the user's operating system (Android, iOS, other) Redirects Android users t ...

phphtml.htaccesshttp-redirect

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

javascripthtmlcsswebkit

What could be causing the iPhone to trim the 20px right padding of my website?

Essentially, here's the situation: Browser: Iphone (the issue doesn't occur in Android): My current setup includes: <meta name="viewport" content="user-scalable = yes"> Here is the corresponding CSS: html, body, #wrapper { height: 1 ...

iphonecss

Troubleshooting issues with drawing images on HTML5 canvas: experiencing unexpected outcomes

As I am diving into learning how to use the HTML5 canvas element, I have had success in drawing rectangles, utilizing getImageData, manipulating pixels, and then using putImageData to witness the color changes of the rectangles, among other capabilities. ...

htmlcanvasdrawimage

Prolong the ultimate position of the initial animation for the translated object

I understand that this question has been asked multiple times before, but I am seeking a fresh approach to these animations. Issue: The second box contains multiple animations, and I am trying to achieve the same effect as the first one. However, it seem ...

csscss-animationscss-transforms

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

phpjavascripthtml

Can you modify a single attribute for multiple child elements under a parent tag in Visual Studio Code simultaneously?

Imagine a scenario where you are faced with 30-40 options and need to update the name attribute from blank to something more appropriate. Is there a method in visual studio code that allows you to do this in one go? It would be a fantastic feature to have. ...

htmlvisual-studio-code

Does the html label prevent propagation from occurring?

Can anyone explain why the toggle function is not being executed when clicking inside the box with the black border, but works when clicking outside of it (although not on the checkbox)? var checks = document.querySelectorAll("ul li"); for (var i = 0 ...

javascripthtmlcssdom-events

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

javascriptjquerycssdropdownbulma

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

csscss-selectors

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

Content in Tab Fails to Load due to IFRAME URL

On my web page, I have embedded an IFRAME with its src attribute set to load HTTPS content. This IFRAME is placed within a Bootstrap Nav-Tab Content, which in turn is located inside a Card element. Upon loading the webpage, I noticed that the content does ...

htmliframebootstrap-4