How put a text at the center of a div without using "text-align:center"?

user_9817602 0
Viewed 127

Here the demo: https://codesandbox.io/s/priceless-cloud-ommr5

I would my text to go to the center of the div preserving on the way its left alignment.

I have tried:

  • margin:auto,
  • flexbox with center justification,
  • x-centering on absolute positioning: all theses methods fails.

How can I align my text and preserving the right justification of the text by the way, as in the following image?:

Here the text is at the center of the div and still aligned to the left for its own box.

Here the ReactJS' snippet:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div className="align_text">
        <h2>Start editing to see some magic happen!</h2>
      </div>
   </div>
  );
}

Here the CSS' snippet:

.App {
  font-family: sans-serif; 
}

h2 {
  width:100vw;

  margin:auto;

  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

  display:flex;
  justify-content: center;
  align-items: center;

  background:orange;

}

.align_text{
  position:relative;

  width:100vw;

  display:flex;
  justify-content: center;
  align-items: center;
}
reactjs css html
3 Answers

Flexbox is a good way to achieve this. You made the mistake to apply the flexbox to the text-elements itself instead of to the .App class and then wrap everything inside .App in another div.

For your sandbox this is the solution:

export default function App() {
  return (
    <div className="App">
     <div>
      <h1>Hello CodeSandbox</h1>
      <div className="align_text">
        <h2>Start editing to see some magic happen!</h2>
      </div>
     </div>
   </div>
  );
}

Styles

.App {
  font-family: sans-serif; 
  display: flex;
  width: 100%;
  justify-content:center;
}

h2 {
  background:orange;

}
user_26721060

Try this css,

    .App {
  font-family: sans-serif;
}

h2 {
  width: 100vw;

  margin: auto;

  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

  display: flex;

  background: orange;
}

.align_text {
  position: relative;
  width: 100vw;

  display: block;
}

h2 {
  padding: 10px;
  display: block;
  width: 50%;
  margin: auto;
}
user_129872350

In this situation it should be enough to give the child paragraph a margin.

In the example below, I have given the paragraph a faint dashed outline so you can see where it begins and ends.

I have given it a margin equal to 10% of the width of the parent <div>.

N.B. You can actively resize the <div> - by grabbing and moving the bottom right-hand corner - to see how the <p> moves around and changes dimensions inside it, as you do.

Working Example:

body {
  background-color: rgb(255, 238, 244);
}

div {
  width: 300px;
  height: 180px;
  border: 3px solid rgb(0, 0, 0);
  resize: both;
  overflow: hidden;
}

div p {
  margin: 10%;
  font-size: 24px;
  border: 1px dashed rgba(255, 0, 0, 0.5);
}
<div>
<p>Here is a left-aligned text at the center of the div.</p>
</div>

user_38977750
Related