How can I perfectly align text inside its own line/box?
0
I know there are a lot of different ways to align something inside a box, there is the transform hack, the display table, flexbox, etc. However, if I have a label and I give it the same padding on the top side and on the bottom side, it still is not perfectly centered. I guess this is because of the line height.
There must be a way to do this constantly between font-families, sizes, etc right? Vertical-align center does not do anything, with is to bad.
body {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.file-input {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: 1;
}
.file-input+label {
background-color: #3c3c3c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.75px;
line-height: normal;
padding: 0.5em 1em;
text-transform: uppercase;
transition: 0.2s background-color ease-in-out;
}
.file-input:focus+label,
.file-input+label:hover {
background-color: #e53935;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Generate Video Thumbnail</title>
</head>
<body>
<form>
<input type="file" name="file-input" id="file-input" class="file-input" />
<label for="file-input">Choose a file</label>
</form>
</body>
</html>PS: For the love of god, no JavaScript.
css
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
|
show 5 more comments
0
I know there are a lot of different ways to align something inside a box, there is the transform hack, the display table, flexbox, etc. However, if I have a label and I give it the same padding on the top side and on the bottom side, it still is not perfectly centered. I guess this is because of the line height.
There must be a way to do this constantly between font-families, sizes, etc right? Vertical-align center does not do anything, with is to bad.
body {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.file-input {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: 1;
}
.file-input+label {
background-color: #3c3c3c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.75px;
line-height: normal;
padding: 0.5em 1em;
text-transform: uppercase;
transition: 0.2s background-color ease-in-out;
}
.file-input:focus+label,
.file-input+label:hover {
background-color: #e53935;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Generate Video Thumbnail</title>
</head>
<body>
<form>
<input type="file" name="file-input" id="file-input" class="file-input" />
<label for="file-input">Choose a file</label>
</form>
</body>
</html>PS: For the love of god, no JavaScript.
css
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
since each font is different I don't think we can even define constantly between font-families unless you have some way to precise this
– Temani Afif
Nov 22 '18 at 10:15
Possible duplicate of Vertically center text that has no descenders?
– Peter B
Nov 22 '18 at 10:16
Well, all I want is to perfectly center some text inside its own box... This is way harder then I think it should be. I can fix this by looking at the rendered box height and setting that as line-height. But that is way to manual.
– Vera Perrone
Nov 22 '18 at 10:17
I want is to perfectly center some text inside its own box. --> you need to define the perfectly, based on what? how you will say it's centred? because actually it's perfectly centred for me.
– Temani Afif
Nov 22 '18 at 10:19
1
@VeraPerrone did you think about the lettersjpy? and also about Ê?
– Temani Afif
Nov 22 '18 at 10:26
|
show 5 more comments
0
0
0
1
I know there are a lot of different ways to align something inside a box, there is the transform hack, the display table, flexbox, etc. However, if I have a label and I give it the same padding on the top side and on the bottom side, it still is not perfectly centered. I guess this is because of the line height.
There must be a way to do this constantly between font-families, sizes, etc right? Vertical-align center does not do anything, with is to bad.
body {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.file-input {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: 1;
}
.file-input+label {
background-color: #3c3c3c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.75px;
line-height: normal;
padding: 0.5em 1em;
text-transform: uppercase;
transition: 0.2s background-color ease-in-out;
}
.file-input:focus+label,
.file-input+label:hover {
background-color: #e53935;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Generate Video Thumbnail</title>
</head>
<body>
<form>
<input type="file" name="file-input" id="file-input" class="file-input" />
<label for="file-input">Choose a file</label>
</form>
</body>
</html>PS: For the love of god, no JavaScript.
css
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
I know there are a lot of different ways to align something inside a box, there is the transform hack, the display table, flexbox, etc. However, if I have a label and I give it the same padding on the top side and on the bottom side, it still is not perfectly centered. I guess this is because of the line height.
There must be a way to do this constantly between font-families, sizes, etc right? Vertical-align center does not do anything, with is to bad.
body {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.file-input {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: 1;
}
.file-input+label {
background-color: #3c3c3c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.75px;
line-height: normal;
padding: 0.5em 1em;
text-transform: uppercase;
transition: 0.2s background-color ease-in-out;
}
.file-input:focus+label,
.file-input+label:hover {
background-color: #e53935;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Generate Video Thumbnail</title>
</head>
<body>
<form>
<input type="file" name="file-input" id="file-input" class="file-input" />
<label for="file-input">Choose a file</label>
</form>
</body>
</html>PS: For the love of god, no JavaScript.
body {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.file-input {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: 1;
}
.file-input+label {
background-color: #3c3c3c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.75px;
line-height: normal;
padding: 0.5em 1em;
text-transform: uppercase;
transition: 0.2s background-color ease-in-out;
}
.file-input:focus+label,
.file-input+label:hover {
background-color: #e53935;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Generate Video Thumbnail</title>
</head>
<body>
<form>
<input type="file" name="file-input" id="file-input" class="file-input" />
<label for="file-input">Choose a file</label>
</form>
</body>
</html>body {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.file-input {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: 1;
}
.file-input+label {
background-color: #3c3c3c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.75px;
line-height: normal;
padding: 0.5em 1em;
text-transform: uppercase;
transition: 0.2s background-color ease-in-out;
}
.file-input:focus+label,
.file-input+label:hover {
background-color: #e53935;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Generate Video Thumbnail</title>
</head>
<body>
<form>
<input type="file" name="file-input" id="file-input" class="file-input" />
<label for="file-input">Choose a file</label>
</form>
</body>
</html>css
css
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
asked Nov 22 '18 at 10:12
Vera PerroneVera Perrone
1218
1218
since each font is different I don't think we can even define constantly between font-families unless you have some way to precise this
– Temani Afif
Nov 22 '18 at 10:15
Possible duplicate of Vertically center text that has no descenders?
– Peter B
Nov 22 '18 at 10:16
Well, all I want is to perfectly center some text inside its own box... This is way harder then I think it should be. I can fix this by looking at the rendered box height and setting that as line-height. But that is way to manual.
– Vera Perrone
Nov 22 '18 at 10:17
I want is to perfectly center some text inside its own box. --> you need to define the perfectly, based on what? how you will say it's centred? because actually it's perfectly centred for me.
– Temani Afif
Nov 22 '18 at 10:19
1
@VeraPerrone did you think about the lettersjpy? and also about Ê?
– Temani Afif
Nov 22 '18 at 10:26
|
show 5 more comments
since each font is different I don't think we can even define constantly between font-families unless you have some way to precise this
– Temani Afif
Nov 22 '18 at 10:15
Possible duplicate of Vertically center text that has no descenders?
– Peter B
Nov 22 '18 at 10:16
Well, all I want is to perfectly center some text inside its own box... This is way harder then I think it should be. I can fix this by looking at the rendered box height and setting that as line-height. But that is way to manual.
– Vera Perrone
Nov 22 '18 at 10:17
I want is to perfectly center some text inside its own box. --> you need to define the perfectly, based on what? how you will say it's centred? because actually it's perfectly centred for me.
– Temani Afif
Nov 22 '18 at 10:19
1
@VeraPerrone did you think about the lettersjpy? and also about Ê?
– Temani Afif
Nov 22 '18 at 10:26
since each font is different I don't think we can even define constantly between font-families unless you have some way to precise this
– Temani Afif
Nov 22 '18 at 10:15
since each font is different I don't think we can even define constantly between font-families unless you have some way to precise this
– Temani Afif
Nov 22 '18 at 10:15
Possible duplicate of Vertically center text that has no descenders?
– Peter B
Nov 22 '18 at 10:16
Possible duplicate of Vertically center text that has no descenders?
– Peter B
Nov 22 '18 at 10:16
Well, all I want is to perfectly center some text inside its own box... This is way harder then I think it should be. I can fix this by looking at the rendered box height and setting that as line-height. But that is way to manual.
– Vera Perrone
Nov 22 '18 at 10:17
Well, all I want is to perfectly center some text inside its own box... This is way harder then I think it should be. I can fix this by looking at the rendered box height and setting that as line-height. But that is way to manual.
– Vera Perrone
Nov 22 '18 at 10:17
I want is to perfectly center some text inside its own box. --> you need to define the perfectly, based on what? how you will say it's centred? because actually it's perfectly centred for me.
– Temani Afif
Nov 22 '18 at 10:19
I want is to perfectly center some text inside its own box. --> you need to define the perfectly, based on what? how you will say it's centred? because actually it's perfectly centred for me.
– Temani Afif
Nov 22 '18 at 10:19
1
1
@VeraPerrone did you think about the letters
jpy? and also about Â Ê ?– Temani Afif
Nov 22 '18 at 10:26
@VeraPerrone did you think about the letters
jpy? and also about Â Ê ?– Temani Afif
Nov 22 '18 at 10:26
|
show 5 more comments
1 Answer
1
active
oldest
votes
1
Just do this, this is the concept of the trick:
.yourLabel{
height:40px;
line-height:40px;
padding:0 5px;
}
As you can see, responsive and works with any font choice.
You can play around with the padding values, as long the height and line height have the same value, it will be centered.
Vertical-align doesn't work on text input fields/labels.
There you go:
https://codepen.io/damPop/pen/WYMqWJ?editors=1100
answered Nov 22 '18 at 10:21
pttsptts
566312
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Vertical-align doesn't work on text input fields/labels.--> it doeas work because those element are inline level element
– Temani Afif
Nov 22 '18 at 10:28
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428551%2fhow-can-i-perfectly-align-text-inside-its-own-line-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Just do this, this is the concept of the trick:
.yourLabel{
height:40px;
line-height:40px;
padding:0 5px;
}
As you can see, responsive and works with any font choice.
You can play around with the padding values, as long the height and line height have the same value, it will be centered.
Vertical-align doesn't work on text input fields/labels.
There you go:
https://codepen.io/damPop/pen/WYMqWJ?editors=1100
answered Nov 22 '18 at 10:21
pttsptts
566312
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Vertical-align doesn't work on text input fields/labels.--> it doeas work because those element are inline level element
– Temani Afif
Nov 22 '18 at 10:28
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
|
show 1 more comment
1
Just do this, this is the concept of the trick:
.yourLabel{
height:40px;
line-height:40px;
padding:0 5px;
}
As you can see, responsive and works with any font choice.
You can play around with the padding values, as long the height and line height have the same value, it will be centered.
Vertical-align doesn't work on text input fields/labels.
There you go:
https://codepen.io/damPop/pen/WYMqWJ?editors=1100
answered Nov 22 '18 at 10:21
pttsptts
566312
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Vertical-align doesn't work on text input fields/labels.--> it doeas work because those element are inline level element
– Temani Afif
Nov 22 '18 at 10:28
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
|
show 1 more comment
1
1
1
Just do this, this is the concept of the trick:
.yourLabel{
height:40px;
line-height:40px;
padding:0 5px;
}
As you can see, responsive and works with any font choice.
You can play around with the padding values, as long the height and line height have the same value, it will be centered.
Vertical-align doesn't work on text input fields/labels.
There you go:
https://codepen.io/damPop/pen/WYMqWJ?editors=1100
answered Nov 22 '18 at 10:21
pttsptts
566312
Just do this, this is the concept of the trick:
.yourLabel{
height:40px;
line-height:40px;
padding:0 5px;
}
As you can see, responsive and works with any font choice.
You can play around with the padding values, as long the height and line height have the same value, it will be centered.
Vertical-align doesn't work on text input fields/labels.
There you go:
https://codepen.io/damPop/pen/WYMqWJ?editors=1100
answered Nov 22 '18 at 10:21
pttsptts
566312
edited Nov 22 '18 at 10:24
answered Nov 22 '18 at 10:21
pttsptts
566312
answered Nov 22 '18 at 10:21
pttsptts
566312
answered Nov 22 '18 at 10:21
pttsptts
566312
566312
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Vertical-align doesn't work on text input fields/labels.--> it doeas work because those element are inline level element
– Temani Afif
Nov 22 '18 at 10:28
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
|
show 1 more comment
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Vertical-align doesn't work on text input fields/labels.--> it doeas work because those element are inline level element
– Temani Afif
Nov 22 '18 at 10:28
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Yes... but it means I need to give it a height. Is there really no other way? I already knew this solution.
– Vera Perrone
Nov 22 '18 at 10:23
Vertical-align doesn't work on text input fields/labels. --> it doeas work because those element are inline level element– Temani Afif
Nov 22 '18 at 10:28
Vertical-align doesn't work on text input fields/labels. --> it doeas work because those element are inline level element– Temani Afif
Nov 22 '18 at 10:28
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
As far I am aware, this is the most consistent and least hacky solutions. I have ran into this very issue before, save yourself the time. You could run a JS and get computed values or offsetHeight or clientHeight(see, the nightmare already starts here, and you would have to consider box sizing properties etc) , and then set the line height accordingly on load. Much more hacky(though I like it), with this, all you need is some CSS rules for various devices. In other words, hobby projects, I would do the JS solution, in production, the above.
– ptts
Nov 22 '18 at 10:29
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
@TemaniAfif, you are right, it is more complicated, sorry for the poor wording, I found this insightful stackoverflow.com/questions/36848273/… Cheers
– ptts
Nov 22 '18 at 10:32
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
I will go with this solution, I am just giving it some time hoping some CSS wizard has another solution.
– Vera Perrone
Nov 22 '18 at 10:34
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428551%2fhow-can-i-perfectly-align-text-inside-its-own-line-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
since each font is different I don't think we can even define constantly between font-families unless you have some way to precise this
– Temani Afif
Nov 22 '18 at 10:15
Possible duplicate of Vertically center text that has no descenders?
– Peter B
Nov 22 '18 at 10:16
Well, all I want is to perfectly center some text inside its own box... This is way harder then I think it should be. I can fix this by looking at the rendered box height and setting that as line-height. But that is way to manual.
– Vera Perrone
Nov 22 '18 at 10:17
I want is to perfectly center some text inside its own box. --> you need to define the perfectly, based on what? how you will say it's centred? because actually it's perfectly centred for me.
– Temani Afif
Nov 22 '18 at 10:19
1
@VeraPerrone did you think about the letters
jpy? and also about Ê?– Temani Afif
Nov 22 '18 at 10:26