For some reason, attribute vertical-align: middle; is not applied to span tag. Here is the code:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle">
50%
</span>
</div>
</div>
Since you know the height of the outer div is 60px, you can set the line-height of the span to match it:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle;line-height: 60px;">
50%
</span>
</div>
</div>
You could use line-height to center your text vertically, in this case use line-height: 60px
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; line-height: 60px;">
50%
</span>
</div>
</div>
Related
So at first I set the blue container's height and width to 25px and to translate it to the top right corner of the green container I simply translate x to 100-25=75px and it works fine,
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 25px;
width: 25px;
background-color: blue;
transform-origin: center center;
transform: translateX(75px);
"
></div>
</div>
Now I want to achieve the same with scale. I set height and width of blue container to 40px and I scale it to 0.625 which basically sets the height and width of blue container to 25px like above. However now when I want to translate it I can't translate with the above value i.e. 75px. I tried putting the blue container back to top left and again tried translating to 75px but it still doesn't work,
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: center center;
transform: scale(0.625) translateX(-15px) translateY(-15px)
translateX(75px);
"
></div>
</div>
Translate then scale and set the origin to be top right
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: top right;
transform:translate(60px) scale(0.625);
"
></div>
</div>
Or like below (96 = 60/0.625)
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: top right;
transform:scale(0.625) translate(96px);
"
></div>
</div>
UPDATE
without transform-origin (30% = ((1-0.625)/2)/0.625) * 100%)
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform:translate(60px) scale(0.625) translate(30%,-30%);
"
></div>
</div>
I'm currently working a lot with flexboxes and have some trouble regarding the code below:
Why isn't the image being treated like a flexbox item
Why are the text items on the right, which are in another flexbox, spanning over the height of their div
* {
font-size: 11pt;
}
.categories-area {
margin-top: 80px;
display: flex;
justify-content: space-between;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 83.59375%;
height: 218px;
}
.category {
position: relative;
width: 20vw;
min-width: 230px;
max-width: 282px;
height: 100%;
}
.category-title {
position: absolute;
width: 6vw;
min-width: 94px;
max-width: 106px;
height: 195px;
background-color: rgb(51, 112, 177);
z-index: -1;
}
.category-content {
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
top: 26px;
left: 2.943262411%;
width: 20vw;
min-width: 192px;
max-width: 273px;
height: 191px;
border: 1pt solid rgb(51, 51, 51);
background-color: rgb(255, 255, 255);
}
.text-content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 125px;
}
<body>
<div class="categories-area">
<div class="category">
<div class="category-title">
<div class="wrapper" style="width: 100%; height: 26px; font-size: 12pt;">
<span>something</span>
</div>
</div>
<div class="category-content">
<div style="position: relative; width: 132px; height: 100%;">
<a href="librarymain.html" title="whatever">
<img src="resources/buchcover.jpg" style="width: 87.179487179%;" />
</a>
</div>
<div class="text-content">
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>something
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>something else
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>even more
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>a little more
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>the last bit
</span>
</div>
</div>
</div>
</div>
</body>
The images in front of the text are irrelevant, the buchcover.jpg is supposed to be a bookcover but for testing purposes anything should work.
Thanks in advance
What are you trying to accomplish here?
Your image is inside anchor tag and you the parent is displayed flex you need to target the <a ... >img</a> not the image.
The text is spanning because the hight is set to number so where the content suppose to wrap while the parent .text-content is setup to column without wrap even. I changed that to flex-flow: row wrap; change that to column and see the difference. You need to fix all your width and hight numbers.
Check My code:
body {
font-size: 11pt;
}
img {
display: block;
}
.categories-area {
margin-top: 80px;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 83.59375%;
height: 218px;
}
.category {
display: flex;
flex-flow: row;
justify-content: space-between;
position: relative;
width: 20vw;
min-width: 230px;
max-width: 282px;
height: 100%;
}
.category-title {
position: absolute;
width: 6vw;
min-width: 94px;
max-width: 106px;
height: 195px;
background-color: rgb(51, 112, 177);
z-index: -1;
}
.category-content {
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
top: 26px;
left: 2.943262411%;
width: 20vw;
min-width: 192px;
max-width: 273px;
height: 191px;
border: 1pt solid rgb(51, 51, 51);
background-color: rgb(255, 255, 255);
}
.text-content {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
height: 125px;
}
.text-content>span {
flex-basis: 100%;
}
<div class="categories-area">
<div class="category">
<div class="category-title">
<div class="wrapper" style="width: 100%; height: 26px; font-size: 12pt;">
<span>something</span>
</div>
</div>
<div class="category-content">
<div style="position: relative; width: 132px; height: 100%;">
<a href="librarymain.html" title="whatever">
<img src="http://via.placeholder.com/80/0f0" style="width: 87.179487179%;" />
</a>
</div>
<div class="text-content">
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>something
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>something else
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>even more
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>a little more
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>the last bit
</span>
</div>
</div>
</div>
</div>
I have 4 div, which look something like this
Desired output:
Current code:
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
<div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
<div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
<div style="width: 100%;" class="center aligned">ABC</div>
</div>
Update: This is a part of a progress bar, so both red and yellow width will change
Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
<div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>
</div>
Fiddle: https://jsfiddle.net/eze5x9t9/
HTML:
<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
<div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Name</span>
</div>
<div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Job</span>
</div>
</div>
Screenshot:
Why is there a green space at the end? The fiddle was done in Chrome.
It's a common BUG for the WebKit browsers, no fixing actually.
reference:
https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
https://css-tricks.com/percentage-bugs-in-webkit/
http://www.screenr.com/pvB8
Somehow in Chrome the outer div is exactly one pixel wider than the contained divs.
You could however solve that by not using display: table; and display: table-cell; (if you only did that to make the vertical centering work) like so:
<div style="width: 100%; height: 65px; background: #00CC00;">
<div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 35px; line-height: 65px;">My Name</span>
</div>
<div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 20px; line-height: 65px;">My Job</span>
</div>
</div>
Edit: A second code snippet showcasing the standard method for vertical centering using absolute positioning and transform: translate:
.outer {
height: 65px;
background-color: #00cc00;
display: flex;
}
.inner {
width: 60%;
float: left;
background: #3074A3;
color: #EDEDED;
height: 65px;
text-align: center;
font-size: 35px;
position: relative;
}
.inner + .inner {
width: 40%;
background: #266996;
font-size: 20px;
}
.inner > span {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<span>My Name</span>
</div>
<div class="inner">
<span>My Job<br />Good job!</span>
</div>
</div>
Trying to do simple header for website, [image][text][splitted horizontal section]:
<div style="width: 930px;">
<div style="width: 280px; height: 80px; display: inline; background-color: red;">image</a></div>
<div style="width: 400px; height: 80px; display: inline; background-color: blue;">text</div>
<div style="width: 250px; height: 80px; display: inline; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>
What I see in VS2010 and IE8:
What I see in Chrome and FireFox:
Why? And how to fix it? I need the first variant of course.
Add float: left to your inline elements.
http://jsfiddle.net/tmKaU/1/
I think this is what you are looking for:
<div style="width: 930px;">
<div style="display: block; float:left; width: 280px; height: 80px; background-color: red;">image</a></div>
<div style="display: block; float:left; width: 400px; height: 80px; display: block; background-color: blue;">text</div>
<div style="display: block; float:right; width: 250px; height: 80px; display: block; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>