I have an a element which has a css rule : display: inline-block; (this css rules should not be changed), and inside this a element I have a span which I want to center vertically, and I want the height of the span element to be equal to the height of it's content.
<a class="anchor" href="#">
Fonctionnalite 2
<span class="label">Lecture</span>
</a>
This is what I tried :
.anchor {
background: #38bcfc;
border-radius: 2px;
box-shadow: inset 0 0 1px #999999;
line-height: 40px;
height: 40px;
display: inline-block;
color: black;
white-space: nowrap;
padding: 0 4px 0 1px;
margin: 0;
vertical-align: top;
color: #FFF;
}
.label{
float: right;
margin-left: 30px;
color: white;
border-radius: 0;
text-shadow: none;
font-size: 11px;
font-weight: normal;
padding: 0 3px 0 3px;
background-color: #abbac3!important;
display: inline-block;
}
And this is a demo in jsfiddle:
https://jsfiddle.net/d3zyfv86/1/
How can I solve this ?
If you want the label to have height of its content, you have to set its line-height because currently it inherits from the anchor.
Additionally, you need to create a container for the text to position it vertically. So, I now use your label as a container and have another span as label-text.
The fix might be: https://jsfiddle.net/d3zyfv86/3/
The question doesnt make much sence
but if you update the height of the span to 1.5em so then you can center it by removing float: right and adding vertical-align: center https://jsfiddle.net/d3zyfv86/2/
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
I have a div block i want to apply border-bottom just beneath the text and not throughout the whole div block
the div block is
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
You can wrap your text in an inline element like <span> and apply border to it.
HTML:
<div id="info-header">
<span>some text here...</span>
</div>
CSS:
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
Note: You can make your element inline-block if you wants to apply block level properties but keep it behaving like an inline element. This way you can also control the border-width and the distance between text and border line.
body {
background: green;
min-height: 100vh;
margin: 0;
}
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
}
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
<div id="info-header">
<span>some text here...</span>
</div>
Add css property text-decoration: underline
You should use text-decoration property.
In your case its:
text-decoration: underline;
You can also use text-decoration for overline and line-through read about CSS text-decoration Property
You can change the display value for an another block level.
html {
background: lightgray
}
#info-header {
font-size: 40px;
/*text-align: center;
margin:100px 10px 10px 10px;*/
display: table;/* shrinks on content */
margin: 10px auto;/* margin:auto instead text-align for this block */
font-family: Poiret One;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
codepen
Give the <div> a fixed width and give it a {margin: 0 auto} for centering
body {
background: #131418;
text-align: center;
}
#info-header {
font-size: 40px;
margin: 0 auto;
width: 300px;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">this is a nice title</div>
I can't seem to understand why certain span properties (in particular, the width and text-align of "controller-row-number" and "controller-row-name"):
#controller {
width: 250px;
float: left;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.controller-row {
background-color: blue;
}
.controller-row-number {
background-color: yellow;
width: 60px;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
text-align: left;
padding: 0 0 0 0;
}
Are being ignored in the following code:
<div id="controller">
<div class="controller-row">
<span class="controller-row-number">1</span>
<span class="controller-row-name">First Name</span>
</div>
<div class="controller-row">
<span class="controller-row-number">2</span>
<span class="controller-row-name">Second Name</span>
</div>
</div>
I have a JSFiddle located here:
http://jsfiddle.net/WZFJD
Can anyone point me to the correct edits to make, so that the styles are adhered?
Thanks!
display: inline-block; to the rescue !
Fiddle
.controller-row-number {
background-color: yellow;
width: 60px;
display: inline-block;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
display: inline-block;
text-align: left;
padding: 0 0 0 0;
}
span elements are by default inline, so you have to make them block, or inline-block if you want your width rule to be applied, otherwise they just take up enough width to fit. The width and height of display: inline; elems cannot be set as you tried to do. Tho you can fake the height using line-height.
Spans are displayed as inline by default, if you want to specify a width you'll have to set display: inline-block.
width cannot be applied to an inline element like a <span>. You will have to also style your spans of class controller-row-number and controller-row-name to be display: inline-block
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.
I want to create a navigation bar where the text is centered, but my CSS code places the hyperlink at the top corner of the li as seen in the image.
CSS:
#navigation {
clear: both;
margin: 0 auto 5px;
margin-top: 0;
height: 6%;
padding: 0 5px;
position: relative;
z-index: 1;
}
#navigation a {
height: 10%;
width: 50px;
color: red;
vertical-align: center;
text-align: center;
text-decoration: bold;
}
li {
border-top: solid;
border-right: solid;
border-left: solid;
border-bottom: none;
padding-left: 1px;
height: 51px;
width: 18%;
background-image: url('../images/tab-selected.png');
background-repeat: repeat-x-y;
border-color: #F0F0F0;
display: inline-block;
padding-left: 1px;
}
HTML:
<nav id="navigation">
<ul>
<li >overview</li>
<li >overview</li>
</ul>
</nav>
There are various ways of vertically center something.
If you KNOW the words of the links and know they will not have a line break, you can add line-height:51px; to the anchor (which is the same height of the LI).
Here's the fiddle: http://jsfiddle.net/vMLpL/
By the way, tips for you:
For the border, you can use border:1px solid #f0f0f0; then just give none to bottom, like border-bottom:none; instead of declaring all sides.
When you want a BG to repeat both X and Y, the background-repeat is repeat only, not repeat-x-y.
For the vertical-align, there is no center. It's top, middle, bottom and baseline. But it work only for inline elements regard to other inline elements besides or for display:table-cell elements (which will work like a td's valign="middle" atribute).
Try this:
Remove the following from your "li" selector:
height: 51px;
Add the following to your "li" selector:
text-align: center;
line-height: 51px;