This question already has answers here:
Vertically center <span> text which is beside a much larger <span>, both inside a <div>
(2 answers)
Closed 5 years ago.
Example: https://codepen.io/ahdung/pen/dJVZov
body {
font-size: 2em;
}
.outer {
background-color: darkgray;
}
.inner {
background-color: red;
font-size: 0.7em;
vertical-align: middle;
/*not useful*/
}
<span class="outer">
<span class="inner">AAA</span>BBB
</span>
simplest solution. although you may want to tinker for exact placement since block with inline isn't always perfect.
.inner {
display: inline-block;
vertical-align: middle;
}
you could go more complex to get a better center doing something with:
.outer {
display: inline-block;
position: relative;
padding-left: 2.5em;
}
.inner {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
}
depending on what's around it and what kind of text or variable text, you can do different things.
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I'm trying to display a text when hovering on another text but it is not working. I followed every steps on another similar questions but it is still not working
Code:
.text-mada {
width: 18%;
position: relative;
left: 760px;
background-color: rgba(255, 255, 255, 0.8);
text-align: justify;
padding: 15px;
z-index: 2;
bottom: 750px;
display: none;
}
.dot-mada {
position: relative;
text-align: center;
font-size: 50px;
left: 52px;
bottom: 44px;
.dot-mada:hover + .text-mada {display: block}
My goal is that when .dot-mada is hovered, .text-mada is displayed
PS: I'm a begginner so this might be a dumb question for you guys, lol
You can use code like in this example:
div {
height:100px;width:100px;
background:blue;
margin:20px;
}
span {
display:none;
height:100px;width:100px;
background:pink;
margin:20px;
}
div:hover ~ span {
display:block;
}
<div>text 1</div>
<span>text 2</span>
If .text-mada is inside .dot-mada, then the solution looks like this
.text-mada {
display: none;
}
.dot-mada:hover > .text-mada {
display: block;
}
<div class="dot-mada">
Foo
<span class="text-mada">Bar</span>
</div>
If they are siblings:
.text-mada {
display: none;
}
.dot-mada:hover + .text-mada {
display: block;
}
<span class="dot-mada">Foo</span>
<span class="text-mada">Bar</span>
keep the div you want to show, below the visible div
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I have tried everything and I still can't find a way to fix this "issue".
Here is my navbar:
Basically, I want the "pixelizer.io" to be centered, but the "log-in/register" prevents it from doing so.
If I make the text inside the button smaller, then "pixelizer.io" will be centered:
Here's the HTML:
<nav>
<h1>pixelizer.io</h1>
<button id="join-button">log-in/register</button>
</nav>
CSS (TITLE):
nav>h1 {
width: 100%;
clear: right;
display: inline;
margin: 0 auto;
font-size: 3em;
}
CSS (BUTTON):
#join-button {
float: right;
padding: 7px;
}
CODEPEN:
https://codepen.io/kibezin/pen/MWKvLGX
I gave the button absolute positioning then created a flex container for the <nav>
nav {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
nav > h1 {
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 3em;
}
#join-button {
position: absolute;
right: 5px;
padding: 7px;
}
<nav>
<h1>pixelizer.io</h1>
<button id="join-button">log-in/register</button>
</nav>
This'll do it:
nav {
position: relative;
text-align: center;
}
nav>h1 {
display: inline;
margin: 0 auto;
font-size: 3em;
}
#join-button {
padding: 7px;
position: absolute;
right: 0;
}
Making the button absolute positioned removes it from consideration for the layout of its siblings.
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I have two divs side by side in inline-block style. When changing overflow on hover from hidden to visible using pure CSS, why do divs change position?
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
.overlaping:hover {
overflow: visible;
}
.wrapper {
height: 200px;
width: 100%;
background: lightblue;
}
<div class="wrapper">
<div class="overlaping">
Some longer text
</div>
<div class="overlaping">
Other div
</div>
</div>
I know inline-block is causing it, but is there some way to mitigate changing position and keeping the display inline-block at the same time?
By default inline-blocks have vertical-align: baseline, which is why it jumps around if another height changes. To fix this, add
.overlaping {
vertical-align: top;
}
Probably you should change the height instead of the overflow setting.
Also add the min-height and float to the boxes.
.overlaping{
width: 14.2%;
min-height: 50px;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background:yellow;
overflow:hidden;
float: left;
}
.overlaping:hover{
height: auto;
}
.wrapper{
height:200px;
width:100%;
background:lightblue;
}
<body>
<div class="wrapper">
<div class="overlaping">
Some longer text ddg dfg sdfg sdfg sdfgsdfgsdfgsdfg sdfgsdfgsd fgsd fgsd fgsdfgsdfgs dfg sert sertsertsertgs dfgsdfg dfgsdfg
</div>
<div class="overlaping">
Other div
</div>
</div>
</body>
Modify .overlapping style as shown below
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
float:left;
margin-right:5px;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 4 years ago.
I am making a chrome extension for the first time and am trying to centre text. And the moment I am using text-align: centre; to horizontally align it but can't figure out how to vertically align so at the moment my text looks like this:
If anyone could help that would be great.
ex) display: table
div{
display: table;
width: 100px;
height: 50px;
background-color: #000;
}
div p{
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fff;
}
<div>
<p>chatter</p>
</div>
ex) flex
div{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
background-color: #000;
}
div p{
color: #fff;
}
<div>
<p>chatter</p>
</div>
ex) position
div{
position: relative;
width: 100px;
height: 50px;
background-color: #000;
text-align: center;
}
div p{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
}
<div>
<p>chatter</p>
</div>
A really simple class I use for this is
.is-vertical-center {
display: flex;
align-items: center;
}
Hope this helps!
This question already has answers here:
heading with horizontal line on either side [duplicate]
(3 answers)
Closed 5 years ago.
First I have to say, I didn't find any answer to this. If it's a duplicate, please forgive me and point me correct.
I'm trying to create a div with three divs inside. The center div should have text, and the side divs should have a vertically centered line, like this:
This is the code I have so far:
HTML:
<div className="container">
<div class="line"><hr/></div>
<div class="text">My Text</div>
<div class="line"><hr/></div>
</div>
CSS:
.container {
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
display: inline-block;
}
.line {
display: inline-block;
}
}
My problem is that I don't see the lines at all, my text is positioned to the left. I tried margin: auto; but that didn't help me. Can someone plese help?
I have one prerequisite, I can't use flexboxes.
You could approach this layout using pseudoelements instead of hr.
Example:
.container {
text-align: center;
position: relative;
}
.container:before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: grey;
top: 50%;
transform: translateY(-50%);
}
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
margin: 0 auto;
display: inline-block;
background: white;
position: relative;
/* add left and right padding if needed */
padding: 0 1em;
}
<div class="container">
<div class="text">My Text</div>
</div>