I am not able to vertically align middle some text using the position absolute method.
JSFIDDLE
HTML
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
CSS
.heighted {
background: gray;
height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
I am getting Stack Overflow error when adding code, it might be a bug in Stack Overflow, so please follow the link.
Set line-height: 100px; to .heighted or .middle-wrapper or .middle - DEMO
CSS:
.heighted {
background: gray;
height: 100px;
line-height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
HTML:
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
You should try display:table-cell; and use vertical-align:middle;
Check how amazing and optimize:
http://jsfiddle.net/9jugdtqx/2/
and:
http://jsfiddle.net/9jugdtqx/3/
Related
with a lot of trialnerror and grinding on stack, I (we) have managed to get two images to overlap in a very specific way:
This has been achieved like so:
.container {
width: 900px;
margin: auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_2 {
position: relative;
padding-top: 41.3%;
}
.imageContainer {
width: 70%;
position: absolute;
top: 0;
}
.psuedoContainer {
position: relative;
padding-top: 59%;
}
.psuedoHolder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
height: 100%;
width: auto;
}
<div class="centered">
<div class="container">
<div class="component">
<div class="container_2">
<div class="imageContainer" style="left: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: left;">
<img src="./img/img_codemesomething.png" />
<a href="page_appDev.html"/>
</div>
</div>
</div>
<div class="imageContainer" style="right: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: right;">
<img src="./img/img_recordmesomething.png" />
<a href="http://google.de"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And as you can see, there are two links included into the main two pictures (HTML).
However, only one of the two is working (the google one isnt). This is probably because one images is sort of "above" the other one, and therefore the lower one can never be clicked. At least it cannot be clicked just like it is right now.
How would I go on about adding a link to both images, that, wherever the user clicks, except for in the white part between both images, the user gets directed to a different page?
Thank you :)
you can wrap the images with the a tag
.container {
width: 900px;
margin: auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_2 {
position: relative;
padding-top: 41.3%;
}
.imageContainer {
width: 70%;
position: absolute;
top: 0;
}
.psuedoContainer {
position: relative;
padding-top: 59%;
}
.psuedoHolder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
height: 100%;
width: auto;
}
<div class="centered">
<div class="container">
<div class="component">
<div class="container_2">
<div class="imageContainer" style="left: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: left;">
<a href="https://stackoverflow.com/questions/55650192/html-add-link-to-overlapping-images-pic/55650729#55650729"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</a>
</div>
</div>
</div>
<div class="imageContainer" style="right: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: right;">
<a href="https://stackoverflow.com/"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
I have a certaing layout of nested divs. One of them I would like to expand beyond its parent. However, with this nesting it's not that simple - I think.
Html:
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't change the html, and there may be other .gcrows that need to stay inside the container. Is this possible to to at all?
Fiddle here.
I hope my question makes sense.
For your current HTML structure you can use .gcrow:first-child and set min-width: 100vw which is same as wrapper width if you remove default margin and padding from html, body.
You can use position: relative, left: 50% and to make it center just add transform: translateX(-50%), here is Fiddle
body,
html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
padding-left: 20px!important;
padding-right: 20px!important;
border: 1px solid pink;
}
.gridcontent {
width: 100%;
max-width: 1018px;
border: 1px solid #333;
margin: 0 auto;
}
.gcrow {
max-width: 100%;
width: 100%;
border: 1px solid #f00;
}
.gcrow:first-child {
min-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Leave me alone</p>
</div>
</div>
</div>
</div>
</div>
</div>
Also its box-sizing: border-box not box-border
try something like this
.gcrow {
position: relative;
overflow: visible;
}
.gcitem {
position: absolute;
right: 0;
top: 0;
}
I have a fixed header and a image below the header.
The image has a property position: fixed.
Now for some devices the image is not in the center as It should be.
Here's the fiddle for it.
The left side has more spaces than the right hand side.
Also above the image, I want to add a p tag which is not showing up for some reason.
Please let me know what's wrong here.
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<P class="step1description" See price</p>
</div>
</div>
</div>
</div>
</div>
Checkout this solution:
body, html {
margin:0;
padding:0;
}
.content-wrapper {
position: relative;
overflow: hidden;
width: 100%;
background-color: #333230;
}
.content-wrapper .center-logo {
position: fixed;
width: 100%;
top: 125px;
left:0;
text-align: center;
margin: 5px 0 15px;
z-index: 1001;
background-color: #333230;
}
.content-wrapper .center-logo img {
margin: 0 auto;
}
.center-logo p.step1description {
position: relative;
top: -30px;
width: 220px;
text-align: center;
color: #fff;
font-size: 12px;
margin: 0 auto;
}
.description {
margin:30px 0 30px 0 !important;
}
.content-wrapper .content {
text-align: center;
width: 100%;
}
.new-class{
padding-bottom: 134px;
top: 134px;
}
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<p class="step1description"> See price</p>
</div>
</div>
</div>
</div>
</div>
You have some typos on html and css! - Here you can find a working fiddle: http://jsfiddle.net/sebastianbrosch/cxumhp9k/1/
Add left:0 on .content-wrapper .center-logo
.content-wrapper .center-logo { left:0;}
.framework {
position: absolute;
}
.headerimg {
margin: 0 auto;
}
<body>
<div class="framework">
<div class="header">
<div class="headerimg">
<img src="Header.jpg">
</div>
</div>
<div class="navbar"></div>
</div>
</body>
This is the code I've got and the margin: 0 auto; doesn't work. Can anyone help me?
Use transformto center horizontaly
.framework {
position: absolute;
display: block;
width: 100%;
}
.headerimg {
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
<body>
<div class="framework">
<div class="header">
<div class="headerimg">
<img src="Header.jpg">
</div>
</div>
<div class="navbar">
</div>
</div>
</body>
In order to center things with margin auto you need to specify a width for the element you want to center and also set the parent elements width to 100%.
.framework {
position: absolute;
width:100%;
}
.headerimg {
margin: 0 auto;
width:300px;
display:block;
}