Is there a way to align the Title in the Titlebar to the center?

Hi there! I could use some assistance :) I have an Electron app and I'm working on the title bar. I would like to center the title, but I'm not sure how to do it. Can anyone provide guidance on this? Also, since I am a beginner, I'm unsure if the current method of creating the Title bar is ideal. Any feedback on that would be greatly appreciated as well. (And if I may ask for your kindness once more, could someone explain how to create the double button with "valider"? It will be very helpful for future reference.

Your help is much appreciated!

Desired Design

Initial Screen

Html:

<div id="title-bar">
      <button id="close-btn" class="tb-buttons">
        <img src="Images/Close.png" />
      </button>
      <p id="title">CharactersPalette</p>
      <button id="eye-btn" class="tb-buttons">
        <img src="Images/Hide.png" />
      </button>
      <button id="min-btn" class="tb-buttons">
        <img src="Images/Min.png" />
      </button>
    </div>

Css:

/* ~~~~~~~~~~~~~ TitleBar Styling ~~~~~~~~~~~~ */
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  -webkit-user-select: none;
  -webkit-app-region: no-drag;
}
#title-bar {
  width: 100%;
  height: 30px;
  -webkit-app-region: drag;
  background-color: #21252b;
}
#title-bar > button {
  height: 30px;
  width: 34px;
  display: inline-block;
  background: transparent;
  outline: none;
  transition: 0.15s linear;
}
#title-bar > button:hover {
  background-color: #d52015;
}
#title-bar > #title {
  display: inline-block;
  color: #f8f4f4;
}
#title-bar > #eye-btn,
#title-bar > #min-btn {
  height: 30px;
  width: 34px;
  display: inline-block;
  background: transparent;
  float: right;
  transition: 0.15s linear;
}
#title-bar > #eye-btn:hover,
#title-bar > #min-btn:hover {
  background-color: #3e4146;
}
#title-bar > button > img {
  height: 18px;
  width: 18px;
  vertical-align: middle;
}

Answer №1

Make sure to update your CSS using the following code snippet.

#title-bar {
    width: 100%;
    height: 30px;
    -webkit-app-region: drag;
    background-color: #21252b;
    display: flex;            /* Ensure to include this line */
    align-items: center;      /* Don't forget about this one */
}

#title-bar > #title {
    display: inline-block;
    color: #f8f4f4;
    margin: 0 auto;           /* You need to add this for proper alignment */
}

Answer №2

Ensure to include "text align center"

#title-bar > #title {
  display: inline-block;
  color: #f8f4f4;
  text-align: center;
}

In addition, make sure to also apply text-align:center; to the main block and float: left to the initial button.

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

Dilemma arises from conflicting javascript codes

Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds. In addition, th ...

Linking CSS to any page other than index.html will not be feasible

Hey everyone! I've run into a little problem that's driving me crazy, so I figured I'd reach out for some assistance. Here's the situation: In my file structure, I have a root file that includes index.html, /css/, /pages/, and /images/ ...

Excessive iterations occurring in JavaScript for loop while traversing an array

After addressing the issues raised in my previous inquiry, I have made significant progress on my project and it is now functioning almost exactly as intended. The main purpose of this website is to iterate through the World Of Tanks API to generate cards ...

What is the best way to conceal text that is not enclosed in <p> or <span> tags?

I need to hide a specific portion of text in an HTML code snippet, however, the text is not wrapped in any specific element. Here is an example: <div class="content"> Give comfortable and durable place to work with a desk. Lock the center d ...

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

I need help creating a navbar that displays the active site using HTML and JS code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=& ...

Choosing an element with JavaScript

var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); /* Itera ...

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

Angular 7 routing glitches causing page refresh issues

Here is the issue I'm facing: I am looking for a way to switch between tabs in my navigation bar without having to refresh the entire website. I have just started working with Angular and I believe that the router should be able to route to a new pag ...

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

Adjust Bootstrap form positioning to be fixed at the bottom of the page

Can anyone provide assistance with positioning this form at the bottom of the page? <form> <div class="form-group"> <input type="email" class="form-control" id="" aria-describedby="emailHelp" placeholder="Enter email"> &l ...

Nodemailer is experiencing issues with displaying HTML content correctly

<div style = "height:auto;width:auto; background-color:#5C81F4;display:flex; justify-content:center;"> <div style="display:flex;flex-direction:column; width:90vw;height:auto;overflow:hidden;border-radius:20px; background-color:# ...

Maintain a consistent size for the material UI drawer, preventing it from resizing when the content size fluctuates

Incorporating Material UI into my project, I decided to use a drawer for navigation. However, within the drawer, there are Collapsible lists that expand when clicked. The issue arises when the list text items are lengthy, causing the drawer to unexpectedly ...

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

What could be causing the issue with my Date and Time input not functioning correctly?

I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "Ty ...

JS code query to specifically target iOS devices

What are the steps to develop a website that can only be accessed by iOS users? In other words, if someone is using Windows or Android, they would be blocked from accessing the site with a message suggesting they download it on Android instead. Additional ...

How can I create a hyperlink that leads to multiple pages?

I am looking to create a hyperlink that will lead to a random webpage each time it is clicked from a selection of URLs. Can anyone suggest a suitable function to get started on this task? ...

React drag and drop feature now comes with autoscroll functionality, making

I am encountering an issue with my nested list Items that are draggable and droppable. When I reach the bottom of the page, I want it to automatically scroll down. Take a look at the screenshot below: As shown in the image, there are more items at the bot ...

A step-by-step guide to customizing MUI CSS within a React component that incorporates MUI elements

Here is a custom Reactjs component I created and used in various components: function CustomSearchBox({ handle, placeholder, inputType, ...props}) { return ( <Box sx={{ display: 'flex', ali ...

What is the best method for eliminating the gap between div elements in CSS?

I am in the process of creating a simple website to brush up on my basic HTML and CSS skills. Utilizing Dreamweaver CS6, I aim to master every aspect of web design the correct way. While exploring how to position div elements, specifically using margins fo ...

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Encountering an issue while working with Next.js 13: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <html>. Every time I attempt to r ...