Putting myText vertically centered

HTML & CSS
1 
<!doctype html>
<html>
 
  <head>
    <meta charset="UTF-8">
    <title>test03</title>
  </head>

<body>
  <div style="border:1px solid [COLOR="Blue"]blue[/COLOR];min-height:30px;">[COLOR="red"]myText[/COLOR]</div>
</body>
</html>

How can I put myText to the vertically-center of the blue box without changing the box size?

2

http://dot.kr/x-test/04.php

The temperal link above which has the code above shows “myText” is on the top of the box.

I like to put “myText” vertically a little lower.

3

Hi,
Vertical centering with CSS is kinda tricky. It really depends on what you are going to be doing with that div as to which method will be best to use.

I could say just use line-height:30px; and that would center it in your example but it would not be a worthwhile method if your text wraps to another line.

I have several examples here:

Really need to know what you will be doing with it in order to suggest the best method :slight_smile: