i have two images shown in the browser which is horizontally align. my objective is to print them using javascript however the preview shows that the 2nd image is going under the first image as if it has a new line. What I need is to print this pictures horizontally align. I also tried adjusting the padding-top to align them but it doesnt work.
<img id = "telin_logo" class="responsive-img" src="img/telin.jpg" style="width: 133px;height: 77">
<img id = "telin_logo2" class="responsive-img" src="img/telin.jpg" style="width: 133px;height: 77px;">
what I mean by print is printing by printer. i used #media print to adjust the layout. sorry for missing out this information
my solution is purely based on css . you can see my snippet . i hope it helps you .
.container{
width:100%;
border:1px solid #222;
position:relative;
height:100%;
}
body,html{
height:100%;
width:100%;
}
.left{
width:50%;
float:left
}
.right{
width:50%;
float:left;
}
<div class="container">
<div class="left">
<p style="text-align:center"><img src="red.png"/></p>
</div>
<div class="right">
<p style="text-align:center"><img src="red.png"/></p>
</div>
</div>
You can also use below properties.
div {
width: 100%;
height: 77px;
border: 1px solid gray;
display: flex;
align-items: flex-start;
text-align: center;
margin: 0 auto;
}
img {
align-self: center;
margin: 0 auto;
}
<div>
<img src="http://placehold.it/133x77/CCCCCC&text=telin_logo">
<img src="http://placehold.it/133x77/CCCCCC&text=telin_logo2">
</div>
Related
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
Learning my way through this...
I'm working toward setting up rows of divs - I don't want any space between them and am not sure what properties to look for to adjust as the width changes.
I'm getting either a 1px gap appearing/disappearing as the images scale, or getting one of the divs bumped down to the next line.
The odd thing is that both rows are basically the same, so I'm lost here.
Here's the current page:
http://www.turnerdesign.com/brackets/
thanks
Andrew
To lose the gaps:
Remove the height: auto; and set a height.
#media screen and (max-width: 959px)
#column700 {
width: 73%;
height: 50px;
float: left;
}
/* Do the same for the other column */
}
For gaps:
(I wrote this first, then re-read the question and was like, OMG I did a whole answer for another question as I didn't understand it at first, but just incase someone needs gaps, here's how)
HTML:
<div class="column700">
<div id="firstProject">
</div>
</div>
CSS:
#firstProject {
width: 100%;
padding: 10px;
background: blue;
}
You have multiple elements with the same id on your page. If you want to add the same style to many elements, use class.
Add style="clear: left;" to the div containing image with a canyon.
Please use this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#image {
display: block
}
#container{
width: 960px;
margin: 0px auto;
}
#header{
width:100%;
height:auto;
margin-bottom: 0px;
float: left;
line-height: 0;
}
#name{
height:50px;
background:none;
width:300px;
float: left;
line-height: 0;
vertical-align: top;
}
#contact{
height:30px;
background:none;
width:auto;
float: right;
line-height: 0;
}
.image-container{
vertical-align: top;
width: auto;
height:auto;
background:#296db1;
background-size: cover;
line-height:0;
}
.div-left{
float: left;
}
#media screen and (max-width:959px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
#media screen and (max-width:640px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
#media screen and (max-width:320px){
.image-container{
float:left;
}
#container{
width: 100%
}
.image-container{
width: 320px;
}
img {
width: 100%;
height:auto;
}
}
.row2{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="name">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Title | Description</p>
</div>
<div id="contact">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Menu</p>
</div>
<div id="header">
<img src="http://www.turnerdesign.com/brackets/images/banner.jpg" block;="" style="display:">
</div>
<div class="row-container">
<!--row 1-->
<div class="row row1">
<div class="image-container div-left" id="column700">
<img src="http://www.turnerdesign.com/brackets/images/blake.jpg">
</div>
<div class="image-container" id="column260">
<img src="http://www.turnerdesign.com/brackets/images/canyonmap.jpg">
</div>
</div>
<!--row 2-->
<div class="row row2">
<div class="image-container div-left" id="column260" style="">
<img src="http://www.turnerdesign.com/brackets/images/canyon.jpg">
</div>
<div class="image-container" id="column700">
<img src="http://www.turnerdesign.com/brackets/images/warrior.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
You can also see the - jsfiddle.net demo link.
You can always think about optimizing the code further:
Optimize / minimize the number of css lines in each media-query.
Manage img parameters more smartly for all media queries.
Restructure the HTML so it becomes more manageable.
Your problem doesn't actually come from the widths applied to your divs, but because of the heights of images.
what is happening here is that in your second row, you have one 700x100 image followed by a 260x100 image. Their ratios aren't the same, so you can understand that commanding their widths will have different effects on their respective heights.
In the end, at some window width, you end up with 1px difference between your images' heights (most often the first one being higher). That causes the 3rd row to actually be pushed to the right, since it has a 1px height to fill first. However, there is only enough room for the smaller image, so the browser breaks a new line for the bigger one.
Solutions:
put a clear: left; on every image at the start of a new line. It will solve this problem, but the 1px height difference will still be there and a white line between your smaller image and the next line will appear.
PS: i'll edit this post if i find better solutions.
I have 4 DIVs fitted in a row which have width:50% and are floating left so that two of them fit in a line. They have to have a min-width so the content can be shown completely. When I make the page smaller I only have one div in a line left (which is what I want) but its not centered any more...
I want those DIVs always to be centered! Can anyone help me?
HTML code:
<div class="row">
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deal_list.png" alt="Deal Liste">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/code_scan.png" alt="Scan">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deals_begonnen.png" alt="Started Deals">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/enter_deal.png" alt="Enter Deal">
</div>
</div>
</div>
CSS:
.row {
margin:auto;
padding:auto;
}
.app-screen-div{
float:left;
width:50%;
min-width:280px;
margin:auto;
text-align: center;
position: relative;
}
.app-screen{
border-style:solid;
border-radius:5px;
padding: 1px;
border: 1px solid grey;
background-color:#ff5253;
width:280px;
margin:auto;
}
.app-screen > img {
display: block;
max-width: 100%;
height: auto;
}
thank you!
The solution was to use display: inline-block instead of float: left and I used text-align: center. Take a look at the example at http://jsfiddle.net/rqh0ompa/4/. Please note that you will have to enlarge the Result section quite a bit in order to see the change/
I have read all the other questions on Stackoverflow related to this topic, and none seem to fix my issue.
I have a nav bar at the top of my page that is fixed to the top left corner then a div in the centre containing an image and some texts.
My content is as so:
<div class="center">
<div id="logo"> <a class="home" href="index.html"> <img class="noborder" src="images/logocat.png" alt="" /> </a>
</div>
<div id="top">
<p class="toptext">TEXT</p>
</div>
<div id="contact">
<table border="0" align="center">
<tr>
<td><a href="http://be.net/crookedcartoon"></td>
<td><p class="contact-text1"> CROOKEDCARTOON#GMAIL.COM </p>
<p class="contact-text2"> Alex: TEXT </p></td>
<td><img class="noborder" src="images/seriesindex.jpg" onmouseover="this.src='images/serieshover.jpg'" onmouseout="this.src='images/seriesindex.jpg'" alt="" />
</td>
</tr>
</table>
</div>
<div id="about">
<p class="content-text-index">TEXT</p>
</div>
</div>
The CSS for the mentioned div is:
.center {
height: 984px;
width: 504px;
position:absolute;
top:50%;
left:50%;
margin-top:-492px;
margin-left:-257px;
padding:0px;
}
It wont centre vertically or horizontally there is no div or wrapper surrounding this div, or any conflicting css (as far as im aware) and it's becoming a pain.
Can anyone suggest a fix? I have tried the half margin/width etc idea and that is what is displayed above.
I notice you are using #center instead of '.center` in your CSS.
.center { /* as you have used a class in your HTML */
height: 984px;
width: 504px;
position:absolute;
top:50%;
left:50%;
margin-top:-492px;
margin-left:-257px;
padding:0px;
}
ok, forget everything and just use this CSS
html, body{ height: 100%; }
.center {
height: 984px;
width: 504px;
position:absolute;
top:50%;
left:50%;
margin-top: -492px;
margin-left: -257px;
padding:0px;
}
And let me know if it's working.
Use CSS flex-box : http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
.center {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row /* works with row or column */
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can go with CSS flex-box. and for old versions of IE you need use either this jquery solution http://dipaksblogonline.blogspot.in/2011/02/div-content-vertical-align-centermiddle.html
or use the display: table; property CSS to vertically align text to middle of div
You can apply a ghost element to fill the 100% of the height of a parent element.
.wrap {
text-align: center;
height: 500px;
background: #d4d4d4;
}
.wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
vertical-align: middle;
width: 300px;
}
for a markup like this:
<div class="wrap">
<div class="center">...</div>
</div>
An example: http://jsfiddle.net/LayyM/
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}