After trying a lot of suggestions on how to solve the following problem, I think it is time to ask for direct help.
I am trying to exactly align a logo (picture) to its following text (heading). All the solutions I tried before have shown an asymmetrical placement (cp. attached picture).
I hope somebody can help me on this. Thank you!
My actual output.
I want to have both red line segments of the same length, in other words: center the text relative to the picture.
And here is a code snippet:
<div class="jumbotron">
<img src="~/Content/images/logo.png" alt="logo" width="50" height="50"/>
<h2 style="display:inline">Tool XY</h2>
</div>
First method
Add vertical-align:middle;margin:0; to h2
.jumbotron h2, .jumbotron img{
display: inline;
vertical-align:middle;
margin:0;
}
.jumbotron img, .jumbotron h2{
display: inline;
vertical-align:middle;
margin:0;
}
<div class="jumbotron">
<img src="https://i.stack.imgur.com/a2I5h.png" alt="logo" width="50" height="50"/>
<h2 style="">Tool XY</h2>
</div>
Second Method
Add to this style to jumbotron
.jumbotron{
display: flex;
align-items: center;
}
.jumbotron{
display: flex;
align-items: center;
}
<div class="jumbotron">
<img src="https://i.stack.imgur.com/a2I5h.png" alt="logo" width="50" height="50"/>
<h2>Tool XY</h2>
</div>
You can use vertical-align: middle; in img tag to vertical center text
.jumbotron img {
display: inline-block;
vertical-align: middle;
}
<div class="jumbotron">
<img src="https://via.placeholder.com/150" alt="logo" width="50" height="50"/>
<h2 style="display:inline">Tool XY</h2>
</div>
Related
I have a javascript code and it needs to place images in different heights in a certein div according to the code. However, I also need the images to be centered. I searched the web and found different solutions such as using display:inline-block instead of float, but then the different heights don't work. Nothing I found seems to do the trick.
Here's the Javascript code that generates the final tags, margin_top is the variable that has the height difference needed.
var added_tags = ('<img style="margin-top:'+ margin_top.toString() +'px; float:left; margin-left:5px;" src="[Image source]" /> '+'<a></a>');
You can't center floated elements. display: inline-block on the to-be-centered elements and text-align: center on their container is the way to go.
Concerning vertical alignment of different heights, you can use vertical-align: middle or top or bottom on the inline-block elements, whatever you need.
.wrap {
text-align: center;
}
.wrap>img {
display: inline-block;
vertical-align: middle;
}
<div class="wrap">
<img src="http://placehold.it/100x150/fa0">
<img src="http://placehold.it/80x70/a0f">
<img src="http://placehold.it/200x180/af0">
<img src="http://placehold.it/50x120/f7a">
</div>
OR
.wrap {
text-align: center;
}
.wrap>img {
display: inline-block;
vertical-align: top;
}
<div class="wrap">
<img src="http://placehold.it/100x150/fa0">
<img src="http://placehold.it/80x70/a0f">
<img src="http://placehold.it/200x180/af0">
<img src="http://placehold.it/50x120/f7a">
</div>
OR
.wrap {
text-align: center;
}
.wrap>img {
display: inline-block;
vertical-align: bottom;
}
<div class="wrap">
<img src="http://placehold.it/100x150/fa0">
<img src="http://placehold.it/80x70/a0f">
<img src="http://placehold.it/200x180/af0">
<img src="http://placehold.it/50x120/f7a">
</div>
if you must use floated element the desired result can be acheived:
section {
padding:20px;
margin:20px;
border:1px solid silver;
box-sizing:border-box;
}
span {
float:right;
}
section.centre span {
margin-right:50%;
transform:translateX(50%);
}
<section>
<span>ALPHA</span>
<br style="clear:both;" />
</section>
<section class="centre">
<span>BRAVO</span>
<br style="clear:both;" />
</section>
I'm using Jquery slide panels for some images. The problem I'm having is when the slide panel shows it moves the image next to it down. I do not want this to happen. Is there a way to show the slider panel but not move the image next to it? There are questions similar to this but there are no answers to them on the site.
Here's the jsfiddle without the image files:
https://jsfiddle.net/amyspod/q2obknwt/
Here's my code:
<div class="images">
<div class="image1">
<img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
<div class="panel" id="hero">PSD to responsive website</div>
</div>
<div class="image2">
<img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
<div class="panel" id="oak">PSD to responsive website 2</div>
</div>
</div>
.myImg {
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin-top: 40px;
}
/*slider panels*/
.image1, .image2{
display:inline-block;
margin-left: 10%;
}
.panel {
padding: 10px;
text-align: center;
background-color: white;
font-size: 20px;
display: none;
}
$(document).ready(function(){
function slidepanel(x,y){
$(x).mouseenter(function(){
$(y).slideToggle("slow");
});
$(x).mouseleave(function(){
$(y).slideToggle("slow");
});
}
slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});
Inline (or inline-block) elements align to the baseline. Try this:
.image1,
.image2 {
...
vertical-align: top;
}
Demo
Also note that CSS classes, by design, are intended to be reusable. I see no reason to have two of them in this case, and they should have semantic values that describe their use or function.
I have a div-container, which has one main image and optional multiple smaller images: http://jsfiddle.net/h5kc8ybm/
The multiple smaller images are generated dynamically, so there can be just 1 or 10 of them. On my JFiddle you can see, that the images are just displayed in one single row.
What I want to achieve is, that there are filled up 'by colomns':
First image on top next to the main image (like shown in this example)
Second image below that (not right of it, like in the example)
Third image right of first image (top)
Fourth image below third image
...and so on.
Is it possible to do that just with CSS?
Update
To avoid misunderstanding: All smaller images should be positioned right of the main image. But these small images should be displayed in two rows, filled up from first row to second row.
The main div-element will never change its height, but only its width.
Example
HTML
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
LESS
.tnwrapper {
background-color: #f5f5f5;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: inline-block;
.tn {
display: inline-block;
vertical-align:top;
position: relative;
margin-right: 5px;
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail.child {
width: 40px;
}
}
}
I was able to do this with the following steps:
wrap the smaller children in a div and make it position:relative
apply position:absolute on even items and reposition them
float them left
http://jsfiddle.net/0neukb08/
The downside of this approach is that it hardcodes the image's size in the "reposition" step
Additionally, the reason I chose not to use flex-box here was this issue with growing its width (I also didn't like the highest voted answer), but flexbox is a good option if you know the container's width in advance.
You probably can do this by
Rotate the container -90deg and reflect it:
.tnwrapper {
...
transform: rotate(-90deg) scaleX(-1);
}
then apply the reverse transformation for the thumbnails:
.tnwrapper .tn {
...
transform: rotate(90deg) scaleX(-1);
}
JSFiddle: http://jsfiddle.net/h5kc8ybm/1/
Note though that the height limit of the container is now width, not height (because it was rotated -90deg.
CSS flexbox styling should do the trick:
.tnwrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.tn:first-child {
height: 192px;
width: 192px;
}
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
EDIT: Sorry, the above snippet doesn't quite answer the question after all. This snippet places each subsequent image in left-to-right then top-to-bottom order, rather than top-to-bottom then left-to-right order as the question asked. I think adding a div around the first image would be the cleanest way to accomplish what you want.
I'm not quite clear on the order of the thumbnails but I think you wanta column format for those.
I that case wrap the main image and the thumbnails in separate divs and then flexbox can do the rest.
.wrap {
display: flex;
margin: 1em auto;
height: 280px;
}
.hero {
padding: 10px;
}
.sidekicks {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
.sidekicks .item {
width: 96px;
height: 96px;
margin: 10px;
background: lightblue;
line-height: 96px;
text-align: center;
}
<div class="wrap">
<div class="hero">
<img src="http://lorempixel.com/image_output/city-h-c-240-250-5.jpg" alt="" />
</div>
<div class="sidekicks">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
Codepen Demo
This is solution with flexbox and since you said that height of main-div wont change this should work http://jsfiddle.net/h5kc8ybm/13/
CSS
.tnwrapper {
background-color: #000;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: -webkit-flex;
display: flex;
}
.child-images {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 10px;
height: 170px;
}
.tnwrapper .tn .thumbnail {
padding: 4px;
margin: 10px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.child-images .tn img {
width: 40px;
}
I am trying to create a toggle button using the following, but its not working.
i have included CSS, HTML and javascript snippets I am using. If I am not doing something right, kindly advice.
CSS:
.toggle-button {
margin-bottom: 15px;
}
.toggle-button img {
display: inline-block;
height: 30px;
width: 60px;
background: url(../images/on-button.png) no-repeat center center;
}
.toggle-button img.down {
background: url(../images/off-button.png) no-repeat center center;
}
HTML:
<head>
<script Language="JavaScript">
function toggle (img) {
$(img).toggleClass("down");
}
</script>
</head>
<div class="right-form">
<h2>Email Settings</h2>
<div class="toggle-button">
<label>Stock Require Scanning:</label>
<img ondblclick="toggle(this);" border="0 id="stock_require_scanning"/>
</div>
<div value="OFF" class="toggle-button">
<label>Head Office Alerts:</label>
<img ondblclick="toggle(this);" class="down" border="0" id="head_office_alerts"/>
</div>
</div>
Is there anything I am not doing right?
Here you have a running demo: http://jsfiddle.net/L9nHY/ (I used the color green for "on" and red for "down"). Your made an error here:
<img ondblclick="toggle(this);" border="0" id="stock_require_scanning"/>
You have to replace this with '#stock_require_scanning':
<img ondblclick="toggle('#stock_require_scanning');" border="0" id="stock_require_scanning"/>
The same you have to do for the other button.
Edited: Sree: See this also: http://jsfiddle.net/L9nHY/1/
So ive seen some jquery hover effects, but none that can do the multiple choices hover.
Basically i have 5 t-shirt color choices, that when each one is hovered over, it should pop up where the current (green t-shirt) is located.
Heres link - http://musclefire.com/26.php
Note: there will also be other t-shirt styles on this page as well, so not sure if this will be too much code/complex for this to work properly.
p.s. - whoever nails it and gets perfect code, i'll send out a free tee to ya!
thanks much!
I'm pretty sure this is what you're looking for:
Demo: http://plnkr.co/edit/jiNxcw9nHQD5gV4vvwlj?p=preview
HTML
<div id="main">
<img class="active" src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
<div id="thumbs">
<img src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
CSS
#main {
border: solid 1px #eee;
text-align: center;
}
#thumbs {
border: solid 1px #eee;
text-align: center;
}
#main img {
width: 300px;
display: none;
}
#main img.active {
display: inline-block;
}
#thumbs img {
width: 50px;
height: auto;
}
jQuery
$(function(){
$('#thumbs img').bind('hover', function(){
var which = $(this).attr('src');
$("#main img:visible").hide();
$('#main img[src="' + which +'"]').stop().fadeIn(800);
});
});
All I know you cannot do this with css. So you should use javascript or jquery for this.
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
For example:
.parent:hover .child{}
.child{}
<div class="parent">
<div class="child"></div>
</div>
You can do what you wanted with jquery,
Live demo : http://jsfiddle.net/XUM8R/