Vertical alignment with pseudo-element and strange characters
I am using Ghost Element . Centering the CSS for an unknown child and I see some really strange behavior when there are strange characters in the line.
When I create a normal line, my output looks like this:
And when I have a string with strange characters, it looks like this:
Here the line is displayed in the second example:
The 2nd St. bridge waterfall is the best part of the show ✨ὤc✨ ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9 Great photo by @agarrini ὄfὄfὄf Thanks for tagging #Igerslouisville ὠ4 ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9
HTML / CSS
.text {
text-align: center;
position: absolute;
padding: 5%;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
overflow: hidden;
}
.text:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin: 0;
}
.message {
display: inline-block;
}
<img src="http://www.placehold.it/500" />
<div class="text">
<div class="message">
<p>The 2nd St. bridge waterfall is the best part of the show ✨ὤc✨ ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9 Great photo by @agarrini ὄfὄfὄf Thanks for tagging #Igerslouisville ὠ4 ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9</p>
</div>
</div>
This is such a strange problem, I have never seen these symbols cause such a layout problem.
source to share
Problem
The problem is not caused by the characters themselves, caused by a long contiguous line of text. Replacing characters with a
has the same problem:
.text {
height: 200px;
width: 200px;
background: #F00;
}
.text:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
background: #F90;
width: 0;
}
.text p {
display: inline-block;
}
<div class="text">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
Decision
The solution is to break the long string somehow (preferably on the server side). In CSS you can break long lines word-wrap: break-word
(or new standard overflow-wrap
browser support ) and appropriate widths:
.text {
height: 200px;
width: 200px;
background: #F00;
}
.text:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
background: #F90;
width: 0;
}
.text p {
display: inline-block;
width: 90%;
word-wrap: break-word;
}
<div class="text">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
source to share
<div id ='myimage' class='image'>
<div class='text'>
This image was created by me
</div>
#myimage
{
background-image: url("myimage.bmp");
height:480px;
width:640px;
line-height: 480px;
}
.image
{
text-align: center;
vertical-align: middle;
}
.text
{
display: inline-block;
vertical-align: middle;
line-height: normal;
font-size:24px;
font-weight:bold;
}
source to share