Vertical-Align a Block Element - css

I have an image and text next to each other in a div. I'm trying to align the text vertically aligned in the middle, but it stays on top. Please help!
http://jsfiddle.net/9KDva/
HTML:
<div class="title-block">
<div class="img-holder"><img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></div>
<div class="title">Get Your Nose Out of Your IPhone</div>
</div>
CSS:
.title-block {
width:272px;
height: 110px;
vertical-align:middle;
}
.img-holder {
float: left;
margin: 0 6px 0 0;
position: relative;
}
.img-holder img {
display: block;
}
.title {
display:block;
text-transform: uppercase;
margin: 8px 0 9px;
}

You can use table and table-cell: And move your class='title' inside img-holder
Fiddle
With padding left away from image - fiddle
.title-block {
width:272px;
height: 110px;
}
.img-holder {
margin: 0 6px 0 0;
position: relative;
display: table;
}
img, .title{
display:table-cell;
vertical-align: middle;
}
.title {
text-transform: uppercase;
margin: 8px 0 9px;
}

I changed your div to span for vertical-align: middle to work.
See Fiddle: http://jsfiddle.net/9KDva/4/
CSS:
.vam {
vertical-align: middle;
}
span.vam {
display: inline-block;
}
HTML:
<div class="title-block">
<span class="img-holder vam">
<img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></span>
<span class="title vam">Get Your Nose Out of Your IPhone</span>
</div>

Using vertical-align: middle won't work on a div.
Something like this might work:
<table class="title-block" style="background-image:url('http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg); background-size: cover; background-position: center center;">
<tr>
<td class="title" style="vertical-align: middle;">
Get Your Nose Out of Your IPhone
</td>
</tr>
</table>

Related

Image overlay doesn't fit

I've a problem with image overlay.
Code is here: https://codepen.io/r-smal/pen/BOBdmX
<section class="team">
<h2 class="team__title">team</h2>
<div class="team__wrapper container__team ">
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
</section>
.container__team {
max-width: 1700px;
margin: 0 auto;
}
.team {
&__title {
margin: 100px;
text-align: center;
font-size: 30px;
text-transform: uppercase;
position: relative;
&::after{
content: "";
position: absolute;
width: 85px;
border-bottom: solid 3px #5dc6e8;
left: 48.5%;
top: 50px;
}
}
&__wrapper {
display: grid;
grid-template-columns: 33.33% auto auto;
text-align: center
}
&__description {
margin: 50px 0 20px;
text-align: center;
font-size: 35px;
}
&__span{
font-size: 35px;
text-align: center;
}
&__card {
position: relative;
}
&__overlay {
position: absolute;
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
display: none;
}
&__img{
}
}
.team__card:hover .team__overlay{
display: block;
transition: 0.3s;
}
As you can see on codepen overlay on top of image is bigger than my image and I can't figure out why. I made it 'fit" but I have to use static margins so in resoult in mobile version it doesn't look right.
And one last question how do I position ::after element center under my text that will stay here even in mobile?Without using static margin like in my code.

CSS a fixed-width image and one taking up the empty space

I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/

Positioning an image in CSS

Basically, I have a navigation bar in my website. In the centre of the nav bar, I want my website's name centred. This was easy of course, but now I want my website's logo positioned to the left of it. Float: left does not work, as this simply puts the logo on the far left of the nav bar.
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
}
#name {
text-align: center;
position: relative;
}
#top-left {
position: relative;
float: left;
border: 1px solid black;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name">champion</h1>
</div>
</body>
</html>
You can do this trick:
<table style="background-color:Gray; width:100%;" >
<tr>
<td style="text-align:right; width:45%">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</td>
<td style="text-align:left; width:30%"">
<h1 id="name">champion</h1>
</td>
<td style="text-align:right; width:25%;">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
</td>
</tr>
<tr style="text-align:right;">
<td colspan="3">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</td>
</tr>
</table>
I have it running here where the float: left appears to be working. I'm guessing there may be something I'm missing. Could you put a jsfiddle or show a live example by chance.
Here's what I see
You can do something like this. It uses :before to attach the logo to the heading text: http://codepen.io/pageaffairs/pen/bchLo
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
text-align: center;
}
#name {
line-height: 56px;
position: absolute;
width: 100%;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
h1 span {
position: relative;
display: inline-block;
padding: 0 20px;
}
h1 span:before {
content: "";
width: 109px;
height: 56px;
background: url(http://www.webmasterworld.com/gfx/logo.png);
position: absolute;
top: 0;
right: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name"><span>champion</span></h1>
</div>
</body>
</html>

Long text causes inline element to display below

I have to inline-block elements. I want to display side by side the two elements. When the text of the link in the second block element displays on two lines because of a long text (word wrap), the link parent element displays on the second line.
In the fiddle bellow the second div.job_content block should display like the first one (side by side).
Any Idea?
Here is the fiddle:
.content {
width: 300px;
}
.job-content {
border: 1px solid red;
margin: 20px 0;
}
.job-thumbnail {
display: inline-block;
}
.job-thumbnail img {
margin: 10px 10px 5px;
max-width: none;
border: none;
}
.job-title {
display: inline-block;
vertical-align: top;
}
<div class="content">
<div class="job-content">
<div class="job-thumbnail">
<img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
</div>
<div class="job-title">
Small text
<dl class="">
<dt class="study_level">Niveau requis:</dt>
<dd>
bac ou équivalent
</dd>
</dl>
</div>
</div>
<div class="job-content">
<div class="job-thumbnail">
<img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
</div>
<div class="job-title">
<a href="" title="Permalien vers Inspecteur(trice) du permis de conduire et de la sécurité routière" rel="bookmark">Large text du permis de conduire et de la
sécurité routière</a>
<dl class="">
<dt class="study_level">Niveau requis:</dt>
<dd>
bac ou équivalent
</dd>
</dl>
</div>
</div>
</div>
Here is a much more simple example:
.wrapper {
border: 1px solid red;
}
.thumbnail {
display: inline-block;
margin-right: -80px;
width: 80px;
}
.text {
display: inline-block;
vertical-align: top;
width: auto;
padding-left: 80px;
}
<div class="wrapper">
<img width="80" height="80" class="thumbnail" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
<a href="#" class="text">
This text shouldn't be pushed downwards when the "result" frame is resized
</a>
</div>
Simply resize the result frame to see the text being pushed downwards... I have this done this before, I don't get what is wrong...
Check out this jsfiddle
.content {
width: 700px;
}
.job-content {
display:inline-block;
border: 1px solid red;
margin: 20px 0;
}
.job-thumbnail {
display: inline-block;
}
.job-thumbnail img {
margin: 10px 10px 5px;
max-width: none;
border: none;
}
.job-title {
display: inline-block;
vertical-align: top;
width:190px;
}
Is there any reason why you're running with inline-block?
If you float the elements it is much easier to do - http://jsbin.com/ojoloq/1/edit
UPDATE
Remove the inline-block and use floats will do the trick (http://jsfiddle.net/DxTg2/12/)
.wrapper {
border: 1px solid red;
float:left;
}
.thumbnail {
float:left;
margin-right: -80px;
width: 80px;
}
.text {
float:left;
vertical-align: top;
width: auto;
padding-left: 80px;
}

css text-align/positioning question

The situation: I have several lists; in each of these lists, the text inside the first li is positioned slightly to the right of center, instead of exactly in the center like the following li elements. In the following example, the second row text ("Site Map") is not centered. Any ideas?
The html:
<body>
<!-- <div class="header">Module Settings</div> -->
<div class="left_content">
<div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav">
<div class="moduleTypeHeader">
<div class="text-center">header_nav</div>
</div>
<ol class="connectedSortable sortable used nonest">
<li id="list_39">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Site Map
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
<li id="list_38">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Contact Us
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
<li id="list_6">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Help
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
</ol>
</div>
</div>
and the relevant css:
html, body {
height:100%
}
body {
margin: 0px;
font-size: 12px;
font-family: Arial;
font-family: Arial, Verdana, Univers;
background-color: #f0eff0;
}
ol {
border: 0 solid #aeaeae;
border-width: 0;
margin: 0;
padding: 0;
padding-left: 30px;
}
ol.sortable, ol.sortable ol {
margin: 0 0 0 25px;
padding: 0;
list-style-type: none;
}
ol.sortable {
margin: 4em 0;
}
.sortable li {
margin: 0 0 0 0;
padding: 0;
}
.sortable li div {
border: 0 solid #aeaeae;
border-width: 1px;
padding: 0px;
margin: 0;
cursor: move;
}
div.moduleTypeDiv {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
width:100%;
}
div.moduleTypeHeader {
border:1px solid #6d6d6d;
padding: 6px;
}
div.moduleTypeHeader {
background: #336699 url(../images/table_header_highlight.png) repeat-x bottom;
font-weight:bold;
color: #ffffff;
}
div.moduleTypeHeader a {
color: #ffffff;
}
.left_content{
width:48%;
float: left;
}
.moduleTypeContent{
position:relative;
top: -50px;
}
.moduleTypeHeader{
position: relative;
bottom: -48px;
}
.legendItem.left, .moduleTypeItem.left{
float: left;
width: 18px;
padding: 5px;
border:0px ;
border-right: 1px solid #aeaeae;
}
.legendItem.center, .moduleTypeItem.center {
padding:6px;
border:0px ;
}
.legendItem.right, .moduleTypeItem.right {
position: relative;
top: -25px;
float: right;
width: 100px;
padding:6px;
width:50px;
border:0px ;
border-left: 1px solid #aeaeae;
}
.listItemContents {
position:relative;
}
.text-center { text-align:center; }
Thanks!
p.s. I created a fiddle: http://jsfiddle.net/earachefl/c2bcc/
You are doing some really weird positioning on the right "column" elements by floating the right, but not actually leaving them any space for them on the line they belong, so they are pushed down a row and then using relative positioning is "hack" them back where you want them. And thus there is no item in the first line that would push the text left so that it would appear centered.
Simple solution: Use a table. Your code is a prime example of bad "CSS hacking" because of misunderstanding the rule "Don't use tables for layout". Please, use a table. Please.
EDIT:
Since you can't use a table, here's what you have to do:
Move the "right" column to the first position in the list item
Give the center column a right margin wide enough for the right column to fit it. (63px = 50px width + 2 * 6px padding + 1px left-border)
http://jsfiddle.net/Se87U/1/

Resources