Aligning an image inside a div with CSS? - html

.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;
}

Related

How To place Both Logo and text in the Same Line?

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

Overlap image on div and make half of it invisible

I want to make the image 70% visible stick with the bottom and the rest of it invisible behind the div. I follow the tutorial with z-index 10 position absolute and overflow:hidden. but the image still show and overlap on other div. Could you help me? thanks!
HTML
<div class="screenshot search">
<div class="container container-fluid">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="./img/sc-search#2.jpg" alt="pencarian"/>
</div>
<div class="col-md-6">
<h3>
search
</h3>
<p>
test
</p>
</div>
</div>
</div>
</div>
CSS
.screenshot {
padding: 6em 0;
height: auto;
}
.screenshot img {
width: 400px;
max-width: 90%;
z-index: 10;
position: relative;
overflow: hidden;
}
.search {
background-color: #fafafa;
}

There are loads of methods to do what you want if I understand right - (a screenshot would help, also if you are including "working code" include a JS fiddle or codepen link) then the example below has working overlap of your content div and the image.
<div class="screenshot search">
<div class="container container-fluid">
<div class="row">
<div class="wrap">
<div class="col-md-6 image-wrap">
<img class="img-responsive" src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="pencarian"/>
</div>
<div class="col-md-6 content">
<h3>search</h3>
<p>test</p>
</div>
</div>
</div>
</div>
</div>
.screenshot {
padding: 6em 0;
height: auto;
}
.wrap {
position:relative;
}
.screenshot img {
width: 400px;
max-width: 90%;
z-index: ;
position: absolute;
}
.image-wrap {
overflow:hidden;
position:relative;
height: 200px;
}
.content {
display:block;
background:white;
position:absolute;
top:0;
width:100%;
}
.search {
background-color: #fafafa;
}
Fiddle
Read about Z-index here

Trouble getting my html tags to show up inside my div border

I am new to this, so the page is for practice. I can't seem to get the "p" or "h1" tags to show up in, what should be the middle of my page. Here is my html code:
<body>
<div class="container">
<div id="top">
<div id="bottom">
<div id="left">
<div id="right">
</div>
<!--Attempted to use a p tag here -->
<!--right div end-->
</div>
<!--left div end-->
</div>
<!--bottom div end-->
</div>
<!--top div end-->
</div>
<!--container div end-->
<!--Attempted to use a p tag here as well thinking it may show up in a different location-->
</body>
My CSS looks like this:
#top,
#bottom,
#left,
#right {
background: #666666;
position: fixed;
}
#left,
#right {
top: 0;
bottom: 0;
width: 100px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#top,
#bottom {
left: 0;
right: 0;
height: 100px;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
If anyone could let me know what I am doing wrong it would be very appreciated. I tried to mess with the positioning a bit with no luck, and I also attempted to give the p tags a z-index but I don't know if that was even something that could have worked properly to begin with.

This is a perfectly acceptable and simpler way to achieve what you want.
body {
background-color: #666666;
width: 100%;
margin: 0;
}
#container {
background-color: blue;
width: 80%;
height: 100px;
margin: auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
<body>
<div id="container">
<h1>HEADER 1</h1>
<p>PARAGRAPH 1</p>
</div>
</body>

Go with float and clear in the css segments
<html>
<head>
<style type="text/css">
#wrapper{background-color:red;width:100%; margin: auto;}
#top{background-color:blue; height:100px;}
#left{background-color:green; width:10%; height:100px;float:left;}
#right{background-color:yellow; width: 10%; height:100px;float:right;}
#bottom{background-color:grey; height:100px;clear:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="left">left</div>background
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>

A trick to center elements in the middle is:
#left{
margin-left: auto;
margin-right: auto;
}
but if you're just looking to center the <h1> or <p> then this would work:
p {
text-align: center;
}
h1 {
text-align: center;
}

align the fixed position image on center for all devices

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;}

Align Text in middle vertically

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/