I have an image with three lines of text to the right. The text is centering on the remaining space on the line, but I would like to center it on the page so that all of the text is centered (the text below the image looks good). Is this possible?
<div style="position:relative">
<img src="RGB2748.jpg" style="float:left;" width="70" />
</div>
<div style=" height:10px; font-size:22px; text-align:center;">Text</div>
<div style="height:10px; font-size:20px; text-align:center;">Text</div>
<div style="height:10px; font-size:16px; text-align:center;">Text</div>
...
...
More text
Thanks
what do you mean by 'center'? vertically? so use e.g. 'line-height:100px' and 'vertical-align: middle'.
the position:relative doesn't make sense in this context. use float:left to position e.g. two divs side by side (beginning on the left side) and clear:both (as said), to continue positioning divs under these two.
edit:
one solution:
<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
<img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
Text
</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
pro: text is centered to page
contra: if text is too wide it would be hidden in parts under the img
modified first solution (if you better like it this way):
<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
<img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
<div style="height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
another solution:
<div style="background: lightblue; width: 10%; float:left;">
<img src="RGB2748.jpg" style="float: left; width: 70px;" />
</div>
<div style="background: lightgray; width: 90%; float:left;">
<div style="line-height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
<div style="line-height:100px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="line-height:10px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
<div style="clear:both;">following text</div>
pro: text will be displayed not matter how long it is
contra: text isn't centered to the page, but only to the surrounding div
Add clear:both to the style of the first text block/div.
Related
I am making a footer with three elements, an h3 and two divs, all elements are floated to the right with a margin percentage.
Problem is the third element(div2) goes bellow the first div instead of floating to the left.
Here is my code, I am aware inline styling is not good idea.
<div class="container" style="width:100%; height:70px; position:relative; float:left; padding:2%;">
<h3 style="float:left; position:relative; margin-right:15%; top:50%; transform:translateY(-50%); ">Contact our experts</h3>
<div class="telcontainer" style="margin-right:15%; width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
<h3 style="position:relative; float:left; margin-left:1%;">694003903</h3>
</div>
<div class="mailcontainer" style=" width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
<h3 style="position:relative; float:left; margin-left:1%;">Mail Us</h3>
</div>
</div>
If you want to align items in a row or column, try using display: flex. It will save a lot of hassle
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="container" style="width:100%; padding:2%; display: flex; align-items: center; flex-direction: column">
<h3 style="float:left;">Contact our experts</h3>
<div class="telcontainer" style="width:auto; position:relative; display: flex">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
<h3>694003903</h3>
</div>
<div class="mailcontainer" style=" width:auto; position:relative; display: flex">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative;">
<h3>Mail Us</h3>
</div>
</div>
You have position:reltive instead of position:relative. Does this change anything if you correct it?
How can I put a div with text, logo or any more stuff on the center of this banner, like the example?
<div class="banner">
<img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas">
</div>
Example :
My Page
Here there is an example you can fit to your needs:
.center{
text-align:center;
width:200px;
height:100px;
background-color:red;
position:absolute;
top: 50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
.outter{
width:100%;
height: 500px;;
background-color:black;
}
<div class="outter">
<div class="center">
<h1>Mywebsite</h1>
</div>
</div>
https://jsfiddle.net/alexcuria/uunwbqyb/
I am trying to keep a div at the bottom of the screen always. And as the div width is smaller than the screen so it should be at the middle of the screen. The First thing is working but it if floating left always.
The code is
<div id="catfish" style="position:fixed; bottom:0; z-index:5000; width: 468px; margin: 0px auto;">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</div>
<div>
Some elemnt here
</div>
</div>
jsfiddle example
Please help me.
You have to add left and right to your div with value 0.
If you also want the your text in the middle you have to add text-align: center;
<div id="catfish" style="position:fixed; bottom:0; left:0; right:0; text-align:center; z-index:5000; width: 468px; margin: 0px auto;">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</div>
<div>
Some elemnt here
</div
</div>
Hope that helps!
Add a margin-left with the half of the width. Now you can move the container 50% from left. Here you can find a working example:
#catfish {
position:fixed;
bottom:0;
z-index:5000;
background-color:#f00;
left:50%;
margin-left:-234px; /* Half of the width */
width: 468px;
}
<div id="catfish">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"/>
</a>
</div>
<div>Some elemnt here</div>
</div>
<div id="catfish" style="position:fixed; bottom:0; z-index:5000; margin: 0px auto;left: 50%; transform: translateX(-50%); padding-left: 30px;">
<div style="position:absolute; margin-bottom:0px; z-index:15;left: 0;">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</div>
<div>
Some elemnt here
</div
</div>
<style>
.mainfooter {
clear:both;
height:auto;
width: 100%;
text-align:center;
background-color: #ff80ff;
border:3px solid purple;
border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
height:80px;
}
</style>
<footer class="mainfooter">
<!-- begin problem area -->
<div style="clear:both; float:left; position:relative; overflow:hidden; width:91px; height:52px;">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif" style="float:left; width:auto; height:auto;" alt="Join one of our groups!">
</div>
<div style="float:left;width:150px; text-align:left; vertical-align:middle;">
<b>JPFun Group<br />
JPFun Newsletter</b>
</div>
<!-- end problem area, I intend to put all of the styles into my css file when I am happy with my footer. -->
<div style="float:right; width:200px; height: 100px">
this is the Right hand side
</div>
<div style="float:left; width:auto; padding:0px;">
other stuff will go here later in the middle
</div>
</footer>
Never mind, I figured it out. I had a missing at the end of a hyperlink in the navigation part near the top of the page, so nothing below it was working right.
Why won't first div in this html display as a column next to the rest of the html that is float:right?
<div style="padding-top:20px; float:left; width:50%; clear:both">Column 1</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
<label for="title">
<h3 style="text-align:left">Column 2</h3>
</label>
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
<input type="text" maxlength="255" value="">
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
<label for="body">
<h3 style="text-align:left">Column 2</h3>
</label>
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width:50%; float:right; clear:both;">
<textarea maxlength="60000"></textarea>
</div>
Column 1 line forces column 2 down as shown here:
http://jsfiddle.net/coder/UQXvC/
The padding of a box adds to its total width.
A box with the following CSS applied:
.box {
width: 50px;
padding: 50px;
}
will be 150px wide.
Since you're adding padding to your columns, they are effectively wider than 50%, and can't fit on the same row anymore.
You should separate your css from your html. then try something like
#col1{
float:left;
width:50%;
{
#col2{
float:left;
width:50%
}
play around with the width %'s and using left or right. using these divs:
<div id="col1"></div>
<div id="col2"></div>