“Tips for positioning text in the middle using HTML and CSS”

I'm trying to customize the text "TITLE" in my HTML and CSS code,

#headerf {
  background-color: #717571;
  overflow-x: hidden;
  position: fixed;
  z-index: 99999;
}
.headert {
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 60px;
  top: 0px;
}
.headert h3 {
  text-align: center;
  color: white;
  margin-top: 30px;
  display: inline-block;
}
.headert a.h-left {
  float: left;
  color: white;
  font-size: 1.5em;
  margin-left: 1em;
  margin-top: 30px;
  position: relative;
  display: inline-block;
}
.headert a.h-right {
  float: right;
  color: white;
  margin-top: 30px;
  position: relative;
  margin-right: 1em;
  font-size: 1.5em;
  display: block;
}
<div id="headerf" class="headert">
  <a href="#" class="h-left">LEFT</a>
  <h3>TITLE</h3>
  <a href="#" class="h-right">RIGHT</a>
</div>

Check out the code snippet here

I've tried everything I know, but the text customization still isn't working (and it's getting worse). I'm at a standstill. Thanks in advance for your help!

htmlcss

Answer №1

#headerf {
  background-color: #717571;
  overflow-x: hidden;
  position: fixed;
  z-index: 99999;
  text-align: center;
}
.headert {
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 60px;
  top: 0px;
}
.headert h3 {
  text-align: center;
  color: white;
  margin-top: 30px;
  display: inline-block;
}
.headert a.h-left {
  float: left;
  color: white;
  font-size: 1.5em;
  margin-left: 1em;
  margin-top: 30px;
  position: relative;
  display: inline-block;
}
.headert a.h-right {
  float: right;
  color: white;
  margin-top: 30px;
  position: relative;
  margin-right: 1em;
  font-size: 1.5em;
  display: block;
}

h3 {text-align: center; display: block; width: 90%; margin: auto; left: 5%; position: absolute; top: 5px;}
<div id="headerf" class="headert">
  <h3>UPDATED TITLE</h3>
  <a href="#" class="h-left">LEFT</a>
  <a href="#" class="h-right">RIGHT</a>
</div>

Answer №2

When dealing with a single line of text and/or image, the solution is quite simple. Just apply the following CSS properties:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* should match the height of your div */

That's all there is to it. However, if you have multiple lines of content, the process becomes a bit more complex. But fear not, there are resources available on specifically addressing "vertical alignment".

Although some methods involve hacks or intricate div structures, personally, I prefer using a simple table with a single cell to achieve the desired result.

Answer №3

Here is the recommended way to use it:

h3 {
  text-align: center;
  display: block;
  width: 90%;
  margin: auto;
  position: absolute;
  top: 5px;
  left: 5%;
}

Snippet

#headerf {
  background-color: #717571;
  overflow-x: hidden;
  position: fixed;
  z-index: 99999;
}
.headert {
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 60px;
  top: 0px;
}
.headert h3 {
  text-align: center;
  color: white;
  margin-top: 30px;
  display: inline-block;
}
.headert a.h-left {
  float: left;
  color: white;
  font-size: 1.5em;
  margin-left: 1em;
  margin-top: 30px;
  position: relative;
  display: inline-block;
}
.headert a.h-right {
  float: right;
  color: white;
  margin-top: 30px;
  position: relative;
  margin-right: 1em;
  font-size: 1.5em;
  display: block;
}

h3 {text-align: center; display: block; width: 90%; margin: auto; left: 5%; position: absolute; top: 5px;}
<div id="headerf" class="headert">
  <h3>HEADER</h3>
  <a href="#" class="h-left">LEFT</a>
  <a href="#" class="h-right">RIGHT</a>
</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

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...

cssreactjsmaterial-uitabs

The height of the navigation bar adjusts to fit the image

I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated! htm ...

htmlcss

What is the method for displaying an asterisk in a select box option?

Is there a way to append an asterisk after the first option in a select element? Here is my html <select class="form-control textyformcontrol"> <option selected>Service area</option> <option>First Option</option> &l ...

htmlcss

JavaScript Cookie Array Handling

Is it possible to create a 2D array as a cookie in JavaScript? If so, how can I go about creating this array cookie and looping through it to retrieve data efficiently? Any guidance on this would be greatly appreciated. Thank you! ...

javascripthtmlajaxjson

The hyperlink does not display any text indicating an issue in the Wave accessibility evaluation tool

On my HTML page, there is a certain code snippet: <a href="example.com"><i class="myclass"></i></a> <a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a> Des ...

htmlhyperlinkaccessibility

Styling with CSS in Angular 2+ can be quite challenging

Hey there, I'm new to Angular 4 and running into some troubles with styling my application. I tried adding a background image to the body, which worked fine, and then added a component to display content, also looking good. Now, when I added a second ...

cssangulartypescriptangular2-routing

Supervising the organization of HTML sections for an offline web application

Currently, I am developing an offline HTML5 application that involves a significant amount of DOM manipulation through the creation of HTML strings within JavaScript functions. For example: var html=''; html+='<div class="main">&apos ...

javascriptjqueryhtml

Located just above the edge of the screen with absolute positioning

One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear aft ...

csspositioncss-animationskeyframe

I am looking to implement a feature in my quiz application where a green tick mark appears next to the question number for the correct answer and a red cross mark for the wrong answer

My HTML code here retrieves questions from a database and displays them based on the question number. <h4>{{indexOfelement+1}}</h4>&nbsp;&nbsp; In my CSS, I need to style the questions as follows: How can I achieve this? Each question ...

cssangular

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

javascriptjqueryhtmlcssjquery-ui

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

htmlcsstwitter-bootstrap

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass

Utilizing JavaFX 2 with a touch of CSS styling

Currently, I am practicing JavaFX 2.0 and working on creating an XYChart with 2 line series while also customizing colors, strokes, etc. through a CSS file. In order to guide me through this process, I decided to refer to the following link: http://docs. ...

cssjavafx-2

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

phpjavascripthtml

Retrieving the information verified in the database

public function actionEditmul($id) { $sql1="SELECT * FROM category_product INNER JOIN category ON category_product.cat_id=category.cat_id WHERE category_product.product_id=$id"; $editcat=Yii::$app->db->createCommand($sql1)->quer ...

phphtmlyii

Can you explain the conflict between using float and setting the height to 100% for divs?

Check out the following HTML code example: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> html, body { padding: 0; m ...

htmlcssheight

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

javascriptcssnode.jselectron

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5

What steps should I take to transition from a table-based layout to a more semantic HTML structure with a CSS-based layout?

Looking at the image presented, a significant portion of the HTML code has been structured semantically, with CSS being utilized for overall aesthetics. However, despite concerted efforts, resorting to a table was necessary to ensure that the segment on th ...

csssemantic-markup