What is the best way to position a single line of text in the center vertically

I need some help with this question as I have been trying to figure it out but can't seem to get it right. I have read various answers, but none of them are working for me. It seems like there is something missing or incorrect in my approach. Any guidance on what I should do and why would be greatly appreciated.

footer {
  display: inline-block;
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}
footer p {
  display: inline-block;
  vertical-align: middle;
  line-height: 1vh;
}
<footer>
  <p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>

htmlcss

Answer №1

To vertically center multi-lined text, you can utilize the display:table and display:table-cell properties. Learn more about vertical centering in CSS.

HTML:

<footer>
  <p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>

CSS:

footer {
  display: table;
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}
footer p {
  display: table-cell;
  vertical-align: middle;
  line-height: 1vh;
}

You could also consider using the flex property for alignment, although it may not be fully supported across all browsers. Check out how to align elements using flex property.

CSS:

footer {
  display: flex;
  justify-content: center;        /* horizontal alignment */
  align-items: center;            /* vertical alignment */
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}

footer p {  
   line-height: 1vh;
}

Answer №2

To enhance the appearance of your footer, simply apply line-height: 15vh; to the footer CSS without using paragraph tags.

footer {
  display: inline-block;
  position: relative;
  height: 15vh;
  line-height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}
<footer>
  Copyright 2016 - Say my name. All Rights Reserved
</footer>

Answer №3

Consider using the following CSS:

footer {
        display: flex; 
        justify-content: center;
        align-items: center;
}

Answer №4

footer p {
  display: inline-block;
  vertical-align: middle;
  line-height: 2vh;
  vertical-align: center;
}

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

What is the best way to vertically align a container beneath a navbar without triggering the appearance of a scrollbar?

I'm in the process of developing an application using Bootstrap 4. The app features a navigation bar and a container located beneath it. Below you'll find the structure of the application: <body> <div id="root"> ...

htmlcssbootstrap-4

What is the best way to create a box-shadow with an inset effect and a touch of

Looking to dive into the world of css3 design and wondering how to achieve a box-shadow inset with a touch of transparency. Check out the example in this fiddle link: http://jsfiddle.net/TeGkt/4/ Any ideas on how to replicate this effect without relying ...

htmlcss

Rearrange the order of items on mobile devices

I currently have a row in Bootstrap with two columns that stack on top of each other for larger screens. However, the order of the columns is reversed on desktop, with 'one' appearing before 'two'. Is there a simple way to rearrange the ...

htmlcsstwitter-bootstrapbootstrap-4

The two child divs are displayed in separate lines, even though they have inline-block styling

Check out the following code snippet. The CSS Code snippet is given below: body { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .parent { width: 100%; height: 100%; position: relative; overf ...

csshtmlwidthparent-child

What is the method for placing a badge above a Font Awesome icon?

Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this: However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt ...

cssfont-awesomebadge

I am encountering a problem with the $invalid property in AngularJS

Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...

javascripthtmlangularjstwitter-bootstrapvalidation

Tips for dynamically resizing a dhtmlxgrid based on various monitor screen sizes

I have incorporated a DHTMLX grid into a table layout to align them next to each other. This setup seems to be the only way I could get them to display side by side. However, I am facing an issue where the grids do not automatically adjust their size base ...

jqueryhtmlgridautoresizedhtmlx

Altering the JavaScript variable by selecting an option from a dropdown list

After downloading a choropleth map from leafletjs.com, I encountered an issue with multiple JS files labeled by year (e.g. us-states2012.js, us-states2013.js). The challenge now is to implement a drop down menu in such a way that selecting a specific year ...

javascriptjqueryhtmlvargeojson

Is the Ngx-bootstrap popover automatic positioning malfunctioning when placed on the right side of the screen?

I am currently facing an issue while implementing popovers on our application using Angular 6.0.1, Ngx-bootstrap 2.0.5, and Bootstrap 4.1.1. The problem arises when I use 'auto' positioning for the popovers, specifically on the right side of the ...

cssangularbootstrap-4popoverngx-bootstrap

Neglect to notify about the input text's value

Having trouble retrieving the text from a simple <input id="editfileFormTitleinput" type="text>. Despite my efforts, I am unable to alert the content within the input field. This is the code snippet I've attempted: $('#editfileFormTitleinp ...

javascripthtml

Challenges with displaying css/bootstrap classes within angular2

Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...

cssangulartwitter-bootstrap-3angular-ui-bootstrapng-bootstrap

JQuery's find() method followed by length/size() is resulting in a return

I'm running into an issue with dynamically created divs. Here's how they are created: // Loop through and append divs to #result_main_search $("#result_main_search").append('<div class="singleresult_main_search"> <a href="http:// ...

javascriptjquerycsshref

The icons within the <i> tag are failing to appear on my Ionic webpage

Trying to incorporate the tag icon in the HTML, but encountering issues with displaying the icon. Here is the code snippet I am using to display the icon, but unfortunately it's not appearing: <i class="fas fa-plus"></i> Intere ...

htmlangularionic-frameworksvgicons

Exploring XPath: strategies for excluding text within nested elements

if I come across some HTML structure like this: <div class=unique_id> <h1 class="parseasinTitle"> <span> Game Title </span> </h1> Game Developer </div> Is there a unique way to extract only the "Game Develo ...

htmlxmlxpathnested

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Troubleshooting Bootstrap's Margin Problem

Currently, I am delving into the basics of bootstrap and encountering some challenges with using margin-auto. Specifically, I am working on positioning a navbar by using ml-auto to separate it from the brand, pushing the navbar to the right side of the p ...

htmlcsstwitter-bootstrap

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

I'm currently in the process of developing my own personal website. I believe that incorporating a section for "user comments and replies" would be a great way to enhance my site. I prefer to avoid user email verification. I'd like users to be a ...

javascriptphpjqueryhtml

An issue with JSPDF arises when used on mobile devices

Currently, I am working on a project to create a responsive web application, which involves utilizing JSPDF for generating PDF reports directly from HTML. For a demonstration of the functionality, you can check out this Demo. Unfortunately, when trying t ...

javascripthtmljspdf

Specialized selection option with disabled function

Looking for assistance with a script to create a custom select box. I have UL and LI elements overlapping a select element, but I want to prevent the UL LI from opening when the select has a "disabled" attribute. Can anyone provide guidance on how to achie ...

javascriptjqueryhtmlselect

Adjust the color of the whole row in an HTML table by changing the background

I am struggling with styling my dynamic table that pulls data from an API. I have successfully generated the table and inserted rows using JavaScript. However, I am facing styling issues. The colors of my table rows are inconsistent (similar to when using ...

htmlcss