Adjusting the margin to center vertical content dynamically

I have encountered a perplexing situation with my layout. In the design below, you can see both double-lined and single-lined text. I have set a margin for the single-lined texts to align them properly. However, when it comes to double-lined text, I find myself manually adjusting the margin. Is there a way to achieve this without relying on a JavaScript function? Can we accomplish this using pure CSS instead of setting specific margins for each type of text?

https://i.sstatic.net/jLZvI.jpg

Here is the structure of my div:

<div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x"></i>
    <span>Ring</span>
</div>
javascripthtmlcss

Answer №1

Yes, it's actually quite easy to achieve using line-height and height:

.operation .itemText{
    line-height: 15px;
    height: 30px; /* ensure it is at least double the line-height */
}

<div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x"></i>
    <span class="itemText">Ring</span>
</div>

The key is to allocate enough space for the text to occupy two lines. Even shorter texts will still take up this space, but only fill one line with actual text.

Alternatively, you can set a min-height for the entire .operation container, but I personally prefer not to do so as it can complicate mobile responsiveness when defining specific heights.

Answer №2

Using CSS Flexbox allows for easy alignment without needing specific heights, thanks to the use of margin: auto 0. The number of lines you have doesn't affect how it aligns.

.wrapper {
  display: flex;
}
.operation {
  display: flex;
  flex-direction: column;
}
.operation .itemText {
  margin: auto 0;
}


/* additional styles for demonstration */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring</span>
  </div>
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring<br>2 lines</span>
  </div>
</div>

<div class="wrapper">
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring<br>3<br>lines</span>
  </div>
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring</span>
  </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

Guide on configuring and executing AngularJS Protractor tests using Jenkins

I am encountering an error with the following configuration: ERROR registration capabilities Capabilities [{platform=WINDOWS, ensureCleanSession=true, browserName=internet explorer, version=}] does not match the current platform LINUX 18:17:05.892 INFO ...

javascriptangularjsjenkinsprotractor

Update app content without requiring users to download a new APK

Hey there, I'm new to all of this so I appreciate your patience. I'm working on a video based app and I'm wondering how I can add new videos/content to the app without having users download a new apk. I know I need to host the app on a data ...

javascriptandroidiosvideo

relocate HTML components

I've been trying to reposition HTML elements within the body of a webpage, but I'm struggling with getting a form tag to appear exactly in the center of the browser - and only that form tag. Can anyone offer guidance or suggest relevant topics fo ...

htmlcssmove

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

Looking for assistance with my vertical carousel project. Is there a way to create a vertical carousel in bootstrap 5 with the previous image fixed? I found a slider on this website: zara.com/jp/en/ I want to maintain the previous image in a fixed posit ...

javascripthtmlcssbootstrap-5

Determining the percentage of a bar in d3.js when hovering over it

I am working with a d3 chart and looking to implement a tooltip feature that displays the label of the bar section along with the percentage it represents in relation to the total bar. Initially, I considered calculating the height of the hovered section t ...

javascriptd3.js

While attempting to make my div responsive, it unexpectedly became stuck to the navbar

After successfully creating a website that works fine on desktop, I encountered an issue when viewing it on my phone. The main content section, which features jokes, gets scrolled up along with the navbar. I followed a tutorial on YouTube to make the navba ...

javascripthtmlcss

Setting the chosen value within a nested ng-repeat loop

I'm struggling with correctly setting up the select boxes in a form that uses nested ng-repeats. The form has parent table rows generated with an ng-repeat, and each row contains a select box that is linked to an attribute in the parent row. The optio ...

javascripthtmlangularjsselectangularjs-ng-repeat

`the issue of $scope object not being passed correctly to ng-if and ng-class ternary conditions

**app.js:** $scope.servers = [ {name:'SQL Server', status:"up"}, {name:'Web Server', status:"down"}, {name:'Index Server', status:"down"} ]; **index.html:** <table> ...

javascriptangularjs

Is it permissible to have empty elements in HTML for accessibility purposes?

Can you help me with a question I have? I was informed that utilizing code like the following is not recommended for creating accessible HTML: <span class="fa-stack fa-lg"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-c ...

htmlaccessibilityscreen-readers

I am having trouble locating elements, both in the browser inspector tool and through Selenium automation

I've been attempting to capture elements from a specific website listed here: However, when I navigate to the element, right-click, inspect, and attempt to copy the CSS selector, ID, or XPath to search for the element using Ctrl + F, it seems impossi ...

htmlgoogle-chromeselenium-webdriverweb-inspector

Perfectly aligning the Update Progress Animation in real-time

I am currently utilizing the Ajax UpdateProgress with a loading gif attached. The issue I am facing is how to ensure that the loading.gif always appears in the center of the screen, even if the user is at the very top or bottom of the page. Is there a meth ...

cssajaxupdateprogress

Error in calculation of $.post function in JQuery

I am facing an issue with my file delete.php, which contains the following code: <?php $folder = "./fak/"; $filename = $_POST['name']; unlink($folder.$filename); ?> Additionally, I have an index.html file with the below code: <html ...

javascriptphpjquery

Regular expression for calculator input including a decimal point and negative sign

I'm in need of a regular expression to validate specific inputs: -0.12-12.56 -0.12+12.56 -0.12*12.56 -0.12/12.56 12.3--12.56 12.3+-12.56 12.3*-12.56 12.3/-12.56 -0.12--12.56 -0.12+-12.56 -0.12*-12.56 -0.12/-12.56 0.12-12.56 0.12+12.56 0.12*12.56 0.12 ...

angularjsnode.jshtml

Is it possible to serve CSS using relative paths that go beyond the URL root?

I've encountered a file path issue with my HTML and CSS files. My HTML file is located in: src/test/html/index.html And the corresponding CSS file is in: src/test/css/index.css In the HTML file, the CSS is linked using: <link rel="stylesheet" ...

htmlcssbrowsercross-browser

Setting a date in Angular Material 2 without closing the mdMenu

I am trying to interact with Material 2's menu. Is there a way to select a menu item without closing the menu popup? Check out this link for more information. ...

javascriptangularangular-material

The XMLHttpRequest function successfully logs data in the console, but does not return the data within the function itself

I find it puzzling that the console.log statement at the end of the code snippet displays the data as expected, while the return optiondata line does not. function populate_selectbox() { var ajaxRequest; try { // Opera 8.0+, Firefox, S ...

javascriptfunctionxmlhttprequestreturn

Having trouble importing a module in my Node.js/Express application

I've encountered an issue while trying to import files into my node js server file. My usual method is correct in terms of paths, so I'm puzzled about what the error might be. import express from 'express' import mongoose from 'mon ...

javascriptnode.jsmongodbexpress

Steps for submitting a form once all inputs have been verified

$('#f_name, #l_name').change(function(){ if($(this).val().length < 2) { $(this).css('border', '1px solid red'); alert('names must be at least 2 symbols'); check ...

javascriptjquery

What could be causing my AngularJS directive to malfunction in Edge browser?

I have encountered an issue where this code works fine in all major browsers, but Edge only shows the valid value in the DOM inspector. The page still displays the old value. Why is this happening? (function (angular, module) { 'use strict'; ...

javascriptangularjsjquery-uimicrosoft-edgejquery-ui-slider

How to access an array mapped to a specific key within an object in JavaScript

Is there a way to access an array mapped to a specific key in a JavaScript object? data = {}; data.key = 'example'; data.value = 'test'; data.list = [111, 222, 333]; Viewing the list of items works fine: alert(data.list); // displays ...

javascriptphparraysobject