Struggles with maintaining proper vertical alignment

Despite following numerous tutorials and tips, every time I make a change to center align my content, it ends up breaking something else and pushing me further away from my goal.

While I have successfully centered the content horizontally, I am now struggling to center it vertically as well.

The 'line-height' property is causing issues with my borders, making it even more challenging. Although I thought I had dealt with this problem before, I can't seem to find any previous solutions.

Here is the code snippet:

.parent {
  width: 100%;
  height: 76px;
  border: 1px solid black;
  border-radius: 15px;
  display: block;
  text-align: center;
}
#space {
  width: 5px;
  display: inline-block;
}
.child {
  width: 75px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #8CAAD2;
  border-radius: 10px;
}
<div class="parent">
  <span class="child">Call Us</span>
  <div id="space"></div>
  <span class="child">Call Us</span>
</div>

Link to FIDDLE

htmlcss

Answer №1

To center elements both vertically and horizontally, use flexbox with align-items:center; and justify-content:center; on the .parent class.

.parent{
  width:100%;
  height:76px;
  border:1px solid black;
  border-radius:15px;
  display: -ms-flexbox;
  display:flexbox;
  display:flex;
  text-align:center;
  align-items:center;
  justify-content:center;
}
#space{
  width:5px;
  display:inline-block;
}
.child{
  width:75px;
  display:inline-block;
  vertical-align:middle;
  border:1px solid #8CAAD2;
  border-radius:10px;
}
<div class="parent">
<span class="child">Call Us</span>
<div id="space"></div>
<span class="child">Call Us</span>
</div>

Answer №2

To achieve vertical alignment, include the following code within the space element:

height: 100%;
vertical-align: middle;

Check the updated fiddle for reference.

Here is the snippet:

.parent {
  width: 100%;
  height: 76px;
  border: 1px solid black;
  border-radius: 15px;
  display: block;
  text-align: center;
}
#space {
  width: 5px;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.child {
  width: 75px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #8CAAD2;
  border-radius: 10px;
}
<div class="parent">
  <span class="child">Call Us</span>
  <div id="space"></div>
  <span class="child">Call Us</span>
</div>

Answer №3

Give this a try:

Sample HTML:

<div class="wrapper">
  <div class="content">
    <span class="button">Click Here</span>
    <span class="button">Click Here</span>
  </div>
</div>

Sample CSS:

.wrapper{
  width:100%;
  height:76px;
  border:1px solid black;
  border-radius:15px;
  display:table;
  text-align:center;
}
.content {
  display:table-cell;
  vertical-align:middle;
}
.button {
  width:75px;
  border:1px solid #8CAAD2;
  border-radius:10px;
  display: inline-block;
}
.button:first-child {
  margin-right: 5px;
}

https://jsfiddle.net/hbebtkxd/2/

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

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

I am facing an issue where I have a lengthy HTML document that is ready for printing, but I need to add borders to every page. I tried adding body { border:2px #666 solid; padding:5px; } in the CSS code, which looked good in the HTML view, but not in the p ...

htmlcssprint-css

Adjust the logo to change color when hovered over

I recently installed the vigor WordPress theme and I wanted to customize my logo. I am looking to have my logo initially displayed in grey scale, but when I hover over it, I want it to change to a colored version. Is there a way to achieve this effect us ...

jqueryhtmlcsswordpress

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

come together for the purpose of creating an insert statement in MySQL syntax

Good day! I have a query about creating a MySQL syntax statement for inserting data into two tables. Here is the structure of the tables: I am able to insert `userid` and `picturepath`, but I'm unsure how to also insert into the `flag` column in the ...

c#asp.netmysqlsqlhtml

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

This strange error is puzzling because it appears on some of the webpages I create, but not on others, even though the elements are exactly the same. For instance, this issue does not occur: <main:uiInputBox onDarkBG="${hasDarkBG}" name="quest ...

javascripthtmlstringjspjstl

JavaScript failing to accurately measure the length

Currently experiencing a Javascript issue where the length of an element is not displayed correctly when using .length, even though it shows up in Chrome console. Here is what it looks like in Chrome console <html xmlns="http://www.w3.o ...

javascripthtmlcssconsole.logvariable-length

Discover the country's three-letter code with the power of HTML and Javascript!

I am in search of a way to determine the location of a user based on the country they are browsing from. I want to achieve this using HTML and Javascript. While researching on stackoverflow, I came across various suggestions to use different API's for ...

javascripthtmlajaxgeolocationreverse-geocoding

Ways to eliminate the default underline in MUI typography

I have a unique Moviecard component in my React app that I built with MUI. It has this persistent and bothersome underline on every Typography component, and no matter what I try, like setting textDecoration to none, it just won't go away. There seem ...

cssreactjsmaterial-ui

Guide to making a single row beneath two columns using CSS Grid

My goal is to utilize CSS Grid in order to design a blurb layout featuring 2 columns at the top and a full row below. This will allow for an FA Icon and Title, accompanied by a full description below, similar to the image provided. I believe I have succes ...

htmlcss

Why can't JQuery/javascript's dynamic gallery's images be used as buttons instead of links?

I've been struggling with my online portfolio for several nights as I build my website. Despite exhaustive internet searches, I couldn't quite articulate my problem in words and tried multiple workarounds. To see the issue, please visit the beta ...

javascriptjqueryhtmlgallerytoggle

Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox? The animation I am referring to is defined as follows: // Animations @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } ...

css

Thymeleaf allows for the splitting of tables across different pages when generating a PDF document

I have a custom HTML template containing a table structure <table id="people" border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Salary</th> </ ...

javahtmlkotlinpdfthymeleaf

Using a for loop within a ul tag in HTML

If I needed to display the numbers 0 to 4 on an HTML page, how should I modify this code snippet to achieve that? <ul> {% for i in range(5) %} <li><a>i</a></li> {% endfor %} </ul> ...

pythonhtmldjango-templates

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

javascripthtmlangularionic-frameworkionic2

<ul><li>issue with indentation

Is there a way to eliminate the indent from my unordered list? While inspecting the element, I noticed what appears to be padding between the width of the box and the content. However, setting padding to 0px and margin to 0px doesn't seem to work as t ...

htmlcss

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

htmlcsscentering

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

I'm currently utilizing a Bootstrap 4 masonry card layout for a particular project, and within this project, there is a <select> element that has been styled with custom CSS properties. One of the customized styles includes a caret created using ...

csstwitter-bootstraptwitter-bootstrap-4column-count

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

javascripthtmlcssanimationjquery-mobile

Limiting the click event to the parent div only

I've encountered a problem with my overlay setup. I have an overlay with a child div inside, and I want the overlay to close only when the user clicks on the overlay itself, not the child div. Even though I've implemented the closing function, it ...

htmlcssreactjs