What are the best ways to ensure text stays center aligned and prevent position absolute elements from overlapping?

I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provide assistance? You can refer to the image linked here: (https://i.sstatic.net/I7GvZ.png). Thank you for your help!

My goal is to always keep the page title centered within the parent div, regardless of its length, without it overlapping with the position-absolute back button.

htmlcss

Answer №1

try using grid layout to center the title

html,body{
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: aliceblue;
  gap: 8px;
}
appbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  width: 360px;
  white-space: nowrap;
  background-color: #fff;
  color: #191919;
}
.icon{
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.back{
  background: url("data:image/svg+xml,...");
}
.title{
  font-weight: normal;
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
}
tool{
  display: flex;
  flex: 1;
  font-size: 14px;
  align-items: center;
}
.right{
  justify-content: end;
}
.link{
  padding: 8px;
  color: rgba(0,0,0,.5);
  cursor: pointer;
}
.search{
  background: url("data:image/svg+xml,...");
}
.add{
  background: url("data:image/svg+xml,...");
}
<appbar>
  <tool>
    <a class="icon back"></a>
  </tool>
  <h2 class="title">Unique Title</h2>
  <tool class="right">
    <a class="link">Rules</a>
  </tool>
</appbar>
... additional appbars with different content ...

Answer №2

  .container{
    display: flex;
    width: 100%;
    align-items: center;
  }
  .text{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
  }

  button {
    background-color: #4E92C7;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin:0 15px;
  }
<div class="container">
    <button>Click Here</button>
    <div class="text"> Long Page Title That Goes On and OnLong Page Title That Goes On and OnLong Page Title That Goes On and OnLong Page Title That Goes On and On </div>
     <button>Click Here</button>
  </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

Ensuring that the div remains at the top of the page while scrolling

Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things You can find what I have at Below is the code snippet: <div id="myElement"> <div id="nav"> <a href= ...

jqueryhtmlcssscrollblogger

Hover over the hidden DIV

I have a div containing an image that is overlapping multiple other divs. It looks something like this: <div style='width:100%;height:100%'><img src='someImage.png'></div> <div id='covered'>I'm un ...

jquerycss

The mouse scurries away once the div height has been adjusted

How can I make the height of #header change when hovering over #hoverme, and then revert back to its original height when the mouse leaves #hoverme? If anyone knows a solution, please check out my jsfiddle as it's not working as I intended. Here is ...

javascriptjquerycssheight

Tips for retrieving the xpath of elements within a div using python selenium

<div class="col-md-6 profile-card_col"> <span class="label">Company Name :</span> <p class="value">Aspad Foolad Asia</p> </div> For a while now, I've been trying to troublesho ...

pythonhtmlselenium

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

Prevent input element from being included in tab order in Internet Explorer

I’m facing an issue in my Single Page Application built with vue.js. I have a checkbox that needs to be invisible for UX reasons, so I set its opacity to zero. However, even with tabindex set to -1, the input element is still included in the tab order ...

htmlvue.jsaccessibility

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder

I'm encountering an issue related to a Wordpress plugin called PDF Embedder, as well as concatenating/using a string with document.write. My goal is to make this code work: <script src="http://nooze.org/wp-content/uploads/scripts/dateGetter.js"> ...

javascriptphphtmlwordpresspdf

JavaScript mouse and touch movement events (mousemove, pointermove, touchmove) are not always accurate

I'm currently working on developing a JavaScript whiteboard and have implemented the following code: let lastTimestamp = 0; const fps = 1000/60; document.addEventListener("pointermove", moveMouse, false); function moveMouse (e) { e.preve ...

javascripthtmlcanvas

"Utilizing jQuery to select elements for the purpose of preventing default

$('input[name=boxes], .item_add a ').on('click', function(e) { e.preventDefault(); //perform common actions } Is it possible to stop the default scrolling behavior when clicking on a link [.item add a], while still allowing the defa ...

jqueryhtml

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...

javascriptjqueryhtmlcssjive

Modify the appearance of the username in the header after logging in with Yii

As a fellow coder using Yii, I'm seeking assistance in changing the style of my username displayed in the header upon login. Currently, it's appearing in black color and I desire it to be italicized-white. The code snippet below shows my header s ...

phpcssyii

Unable to Retrieve Modified Content with $().text();

In the process of developing an app, I am encountering a challenge where I need to transfer user input to another element after processing it. However, I am facing an issue with accessing the updated value of the <textarea> using .text(), as it only ...

javascriptjqueryhtmldom

Utilizing PHP to send emails via an HTML form

I spent all day attempting to send an email from my HTML contact form using PHP, but I'm struggling as a beginner. When I uploaded the form to free web hosting, I received a "success!" message upon submission, yet no actual email was sent. Any assist ...

phphtmlformsemail

CSS - Dynamic triangle separator

I've been working on creating a triangle-shaped CSS divider. Using the code snippet below, I was able to achieve the desired result: border-width: 4vw 75vw 0 23vw; However, this method feels a bit unconventional. Since you can't use percentages ...

htmlcssdivider

Can a jQuery/JavaScript script be run standalone?

I've got a bunch of HTML pages saved on my computer and I'm looking to create a JavaScript script that can extract specific text or elements from those pages. I found some jQuery code snippets on Stack Overflow that do what I need, but I'm n ...

javascriptjqueryhtml

Using a simulation to deactivate webpage elements and showcase the UpdateProgress control

I am currently attempting to disable certain page elements and display an update progress control in my application. In order to achieve this, I have applied a style sheet with the property filter: alpha(opacity=85); However, I encountered an error stati ...

c#asp.netcssajax

LESS — transforming data URIs with a painting mixin

Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...

javascriptnode.jscsslessdata-uri

How can I load a function from the HTML file that is being loaded using .load() in jQuery?

Within my main window main.html, there is a div button that, when clicked, loads another html file into a large div. This is achieved using the .load() function: $('#mainpanel').load("search.htm"); The "search.htm" file contains a function cal ...

javascriptjqueryhtmlparentonload

Press a button to generate an image inside a specified div element

I've been struggling with this particular issue and have attempted various solutions, but there seems to be an error in my implementation as it's not functioning correctly. My goal is simple: I want to be able to click a button and have an image ...

javascripthtmlimage

Capture table screenshot using Selenium with unique font style

Below is a Python script that uses Selenium to load a specific page and capture a screenshot of the table on the page. from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By from sel ...

pythonhtmlselenium-webdriverscreenshot