Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by zachvaldez
at 2024-11-18 07:36:22
ModifyPoint:290 Replies:16 POST_ID:828807USER_ID:11517
Topic:
Cascading Style Sheets (CSS);;Hypertext Markup Language (HTML)
Please correct this css:
Im trying to place the text in the middle of the div but it is anchoring on the top.
div class="datelocate">
Date Initial Allocation Received:
</div>
div.datelocate
{
width: 300px;
vertical-align: middle;
float: none;
height: 67px;
line-height: 20px;
height: 61px;
border-right-style: solid;
border-right-color: inherit;
border-right-width: 1px;
}
Im trying to place the text in the middle of the div but it is anchoring on the top.
div class="datelocate">
Date Initial Allocation Received:
</div>
div.datelocate
{
width: 300px;
vertical-align: middle;
float: none;
height: 67px;
line-height: 20px;
height: 61px;
border-right-style: solid;
border-right-color: inherit;
border-right-width: 1px;
}
Author: zachvaldez replied at 2024-11-25 13:19:19
Thanks for the concept shared I learned.
Expert: Alexandre Simões replied at 2024-11-19 14:59:35
I just enlarge the height to let
the author easily view the result
I imagined that... just thought it was worth mentioning because if he copy/paste it blindly it will surely break everything around :)the author easily view the result
Cheers mate!
Expert: duncanb7 replied at 2024-11-19 14:52:19
thanks your reply, I just enlarge the height to let
the author easily view the result, of course, I know it
is 61px that is too small to be aware of css change.
I quit this thread since Alex can handle it
Enjoy the sprite in EE , share and same for all of us or people
Duncan
the author easily view the result, of course, I know it
is 61px that is too small to be aware of css change.
I quit this thread since Alex can handle it
Enjoy the sprite in EE , share and same for all of us or people
Duncan
Accepted Solution
Expert: Alexandre Simões replied at 2024-11-19 14:40:38
290 points EXCELLENT
@duncanb7: your code works, just have a problem. I think by mistake you've set the line-height: 561px, instead of 61px, and that may be causing some troubles to @zachvaldez
So here's @duncanb7's code with the line-height fixed:
So here's @duncanb7's code with the line-height fixed:
<html><style>div.datelocate{ width: 300px; text-align: center;vertical-align: middle; line-height: 61px; border-right-style: solid; border-right-color: inherit; border-right-width: 1px;}</style><body><div align="center" class="datelocate"> Date Initial Allocation Received:</div></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:
Also this that was my initial solution works:
<html><style>div.datelocate{ width: 300px; height: 67px; line-height: 67px; border-right: solid; border-right-color: inherit; border-right-width: 1px; text-align:center;}</style><body><div class="datelocate">Date Initial Allocation Received:</div></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:
But it really doesn't matter if you don't understand the concept.
DIV's don't align things vertically.
To kind of make it look like it's aligned you need to use some tricks but they all have they draw backs.
The one we're giving you is based on the line-height css property that basically defines the height of each line of text and the text is always rendered in the middle of this height using more or less space depending on the font-size.
The problem with this approach is if for some reason you end up with 2 lines of text...
Another option is to not set any height on the div but set top and bottom padding.
For instance if a DIV have a padding: 10px 0;" this will create a gap between the upper and bottom part of the text of 10px and the text will be in the middle.
The problem here is that you're not setting an exact height for the div but on the other hand this gap can be set to be proportional to the font-size if we set it as: padding: 1em 0;"
This is very useful if you want to support multiple font sizes and keep everything in scale.
There's also @COBOLdinosaur option that is less... lets say clean :)
That is basicallz try to fool the rendering engine saying that this DIV here is actually a table cell... :)
I hope I managed to give you some insights, although there's a lot to learn in this.
Copy/Paste and expect everything to work magically is never a solution mate.
Cheers!
Expert: duncanb7 replied at 2024-11-19 10:59:04
I tried my code attached in this thread is working at my side ,
Could you send us your completed code for us that must include your problem
issue so that let us able to view it on our browser ?
If possible, coud you also try AlexCode ?
Could you send us your completed code for us that must include your problem
issue so that let us able to view it on our browser ?
If possible, coud you also try AlexCode ?
Author: zachvaldez replied at 2024-11-19 10:23:54
I tried all and the only thing that sets it to the middle of div is..
div class="datelocate">
<span>Date Initial Allocation Received:</span>
</div
div class="datelocate">
<span>Date Initial Allocation Received:</span>
</div
Author: zachvaldez replied at 2024-11-19 10:18:17
duncanb:
this line...text-align: center ... this attribute is not recognized/available when I added to the class nor to to the div
this line...text-align: center ... this attribute is not recognized/available when I added to the class nor to to the div
Expert: COBOLdinosaur replied at 2024-11-18 10:50:42
You can probably get the original code to work by adding display:table-cell
That will cause the div to take on some of the attributes of a table cell and then vertical-align:middle which only applies to table cells should work.
Cd&
That will cause the div to take on some of the attributes of a table cell and then vertical-align:middle which only applies to table cells should work.
Cd&
Expert: duncanb7 replied at 2024-11-18 08:42:37
Did you try my code ? it is already displayed the content in the center in div tag
Author: zachvaldez replied at 2024-11-18 08:38:05
this is what I did and seemed to work but is the extra code necessary?
div.datelocate
{
width:300px;
vertical-align:text-bottom;
text-align:center;
float: none;
line-height: 30px;
height: 66px;
border-right-style: solid;
border-right-color: inherit;
border-right-width: 1px;
margin-right: 0px;
}
span
{
display: inline-block;
vertical-align: text-top;
line-height: 30px;
}
div class="datelocate">
<span>Date Initial Allocation Received:</span>
</div>
This displays the text in the middle of div...
div.datelocate
{
width:300px;
vertical-align:text-bottom;
text-align:center;
float: none;
line-height: 30px;
height: 66px;
border-right-style: solid;
border-right-color: inherit;
border-right-width: 1px;
margin-right: 0px;
}
span
{
display: inline-block;
vertical-align: text-top;
line-height: 30px;
}
div class="datelocate">
<span>Date Initial Allocation Received:</span>
</div>
This displays the text in the middle of div...
Expert: Alexandre Simões replied at 2024-11-18 08:08:02
div.datelocate{ width: 300px; float: none; height: 67px; line-height: 67px; border-right-style: solid; border-right-color: inherit; border-right-width: 1px;} 1:2:3:4:5:6:7:8:9:10:
Expert: duncanb7 replied at 2024-11-18 08:04:50
Try my code and take out height in css
try to increase line-height , for testing only
it will display the content in div tag in center
horizontally and vertically
Hope it helps
Duncan
try to increase line-height , for testing only
it will display the content in div tag in center
horizontally and vertically
Hope it helps
Duncan
Author: zachvaldez replied at 2024-11-18 08:03:30
text-align: center;
does not work. the text is anchored on top of div not middle.
does not work. the text is anchored on top of div not middle.
Expert: duncanb7 replied at 2024-11-18 08:02:30
<html><style>div.datelocate{ width: 300px; text-align: center;vertical-align: middle; line-height: 561px; border-right-style: solid; border-right-color: inherit; border-right-width: 1px;}</style><body><div align="center" class="datelocate"> Date Initial Allocation Received:</div></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:
Expert: Alexandre Simões replied at 2024-11-18 08:01:20
You're already using the line-height:20px
If you set it to the same height of the div the text will appear in the center
If you set it to the same height of the div the text will appear in the center
Expert: duncanb7 replied at 2024-11-18 07:47:22
vertical-align: middle may be replaced by text-align: center;
COuld you test it ?
COuld you test it ?
