how do i align the text to the middle of the div? Code is the description. | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

how do i align the text to the middle of the div? Code is the description.

<div style="width: 200px; height: 500px;">Hello</div> I would like to see different codes

31st Mar 2017, 6:51 AM
chris
chris - avatar
5 Answers
+ 3
<div style="width: 200px; height: 400px; background:red;display:flex;align-items:center"> <span style="margin:auto"> Hello </span> </div>
31st Mar 2017, 7:11 AM
Ashwani Kumar
Ashwani Kumar - avatar
+ 2
Syed Muhammad Dawoud Sheraz Ali: the code you wrote is wrong can you please delete your comment so people don't get confused
31st Mar 2017, 11:13 PM
chris
chris - avatar
+ 1
With this technique you can center the text both horizontally and vertically. First enclose the text inside an H1 or P tag, <div style="width: 200px; height: 500px;"><h1>Hello</h1></div> The CSS: div { position: relative; } h1 { position: absolute; left: 50%; top: 50%; transform: translate3D(-50%, -50%, 0); }
1st Apr 2017, 4:09 PM
Naeem Rind
Naeem Rind - avatar
- 1
use text-align:center. another way is to enclose div inside p tag and use text-align with p. <p style="text-align:center"> div... </p>. this should do.
31st Mar 2017, 7:03 AM
Syed Muhammad Dawoud Sheraz Ali
Syed Muhammad Dawoud Sheraz Ali - avatar
- 1
.div { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
31st Mar 2017, 7:05 AM
XenRox
XenRox - avatar