How can I center a text element vertically within its parent div element?

After researching various solutions to align text within a div, I have found that many recommend using the vertical-align property. Despite trying this method, it does not seem to work for my specific case.

.free {
  display: inline-block;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  color: #ff0000;
  background: #ffffff;
  border: dashed #ff0000 2px;
  width: 105px;
  height: 46px;
  font-size: 1.07rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 0;
}
.free p {
  vertical-align: middle;
}
<div class="free">
  <p>Text</p>
</div>

htmlcss

Answer №1

Check out this example: Demo

To achieve the desired result, include the code snippet below in your CSS file:

.free {
line-height:46px;   
}

.free p {       
    background-color:#ccc;
    padding:0; margin:0;
}

I hope this solution proves to be beneficial!

Answer №2

The reason for the issue is due to the usage of display: inline-block;. Instead, try using display: table;. Please refer to the code snippet below:

.free {
  display: table;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  color: #ff0000;
  background: #ffffff;
  border: dashed #ff0000 2px;
  width: 105px;
  height: 46px;
  font-size: 1.07rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 0;
}
.free p {
  vertical-align: middle;
}
<div class="free">
  <p>Text</p>
</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

Access the reset button on a dynamic image using the document.getElementById method

I'm still new to coding in JavaScript and I have a question. In my class, I was required to assign four buttons to four different JavaScript commands. I managed to get three of them working successfully, but the last one seems to be giving me trouble. ...

javascripthtml

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

jquerycssseleniumxpath

Mastering responsive layout design in Nextjs using Tailwind CSS

I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS. My goal is to ensure that the image remains responsive. <div className="block"> < ...

cssnext.jstailwind-cssnext-images

Press the Instagram Follow Buttons by utilizing Selenium with Java

click here for image description Hello, I am currently working on automating the process of clicking follow buttons using Java. However, I'm encountering difficulties when trying to use JavascriptExecutor within a for loop. Below is the code snippet ...

javacssseleniumxpath

Acquiring HTML form data using JavaScript

Although it may seem trivial, I'm facing a challenge. I have an HTML form that is dynamically generated by JavaScript and populated with initial data fetched from the server. The form is displayed correctly with the pre-filled data. My goal is to allo ...

javascriptjqueryhtmlforms

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

Is there a way to access data when the page loads, even if it is initially undefined? I keep getting this error message: "ERROR TypeError: Cannot read properties of undefined (reading 'imagepath')". How can I resolve this issue? import { Compone ...

htmlangulartypescriptcomponentsrouteparams

Error encountered during PHP GET submission

I am currently working on a PHP page where users can select a season and episode from a form, which will then be sent to a page to play the selected episodes. Below is the form: <form action="view" method="get"> <select> <option name="s" ...

phphtml

The app was rejected from the Play Store due to a breach of section 4.4 in the Developer Distribution Agreement

Just got an email notification that my application submission, Chami Browser, has been rejected due to violation of section 4.4 of the Developer Distribution Agreement. The reason for rejection is accessing YouTube videos in violation of their Terms of Se ...

androidhtmlwebviewyoutube

Personalized style for text overflow property

The application is created using Angular. Within a component, we have a div containing some text: <div>abcdefghijklmnop<div> Depending on the screen size, the text should either be fully displayed or clipped. I discovered the property 'te ...

javascripthtmlcssangulartypescript

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

After a user clicks on an element in my app, I have some logic that runs. For example: html <h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3> js $scope.showAlert = function(text) { console.log(' ...

javascriptjqueryhtmlangularjs

Ensure the table row remains on one page when printing or viewing the print preview

I'm currently dealing with an html report that contains a table, which can be seen here http://jsfiddle.net/fhwoo3rg/2/embedded/result/ The issue arises when trying to print the report, as it breaks in the middle of a table row like this: https://i ...

htmlcsshtml-table

Preserve marked checkboxes upon page refresh

So I created a search engine with a filter using checkboxes in a form. The filter function is working fine when I submit the form (I'm using Flask for this). However, once the results are displayed, the checkboxes that were used as filters become unch ...

javascripthtmlcheckboxbrowser

Tips for adding a space before the footer in a document

Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...

cssruby-on-railshaml

What could be causing my React Router component to display incorrect styling?

While working with react-router, I encountered an issue where the text from the routed page started appearing in the navbar. Even though I separated it as its own component and it functions correctly, this specific problem persists. As a newcomer to React, ...

javascriptcssreactjsreact-router

What is the reason behind Flask's choice to return <embed> files for download rather than simply displaying them

When I try to render a template using Flask that includes images, the files are being downloaded instead of displayed. For example, <embed src="static/yes.svg" type="image/svg+xml"> If I place this code inside test.html and view it in Google Chrom ...

pythonhtmlsvgflaskjinja2

Having trouble accessing NSE Bhavcopy zip file in R due to a HTTP status of '403 Forbidden'

My current project involves automating the process of downloading a zip file in R. On the specific webpage I am working with, I can easily download the zip file by clicking on it or by right-clicking and saving the file. However, my challenge lies in down ...

htmlr

How to add a checkbox to an HTML form with QT

I am looking to add a checkbox in an HTML code using QT. I have successfully created an HTML using QTextEdit and QTextCursor, but I am unsure of how to insert a checkbox. If anyone has experience with solving this issue, please provide me with some guidan ...

htmlqtcheckbox

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. code .html <div class="margin-top-47 margin-horizontal-10" #hel ...

htmlcssangulartypescriptionic-framework

Load subtitles into your video in real-time

Let's discuss the scenario: The server is receiving a stream of SRT file. This stream is then converted into VTT format by the server, which is further buffered and sent to the client through an io.socket connection. Below is the server-side code: s ...

javascriptnode.jshtmlhtml5-videoblob

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

javascriptcssreactjsmaterial-ui