I'm attempting to align text to the right of an image;
css
.p1 {
position: absolute;
width: 100px;
height: 50px;
top: 40%;
left: 70%;;
}
html
<img src=../images/diagram1.png alt="Diagram"/>
<span class="p1">This is a testtttttttttttttttttttttttttttttt </span>
The code works for a short amount of text, but for a large amount of text it gets squished and forms a really long paragraph. Here is what I mean;
[image] [tes
ttt
ttt
tt]
I want the text to appear as a normal paragraph block.
[image] [testttt
ttttttt]
Hi #Eggy Please find fiddle
.container{
width:100%;
overflow:hidden;
}
.container img{
display:inline-block;
margin-right:20px;
float:left;
}
A simple way is to remove the absolute positioning and give the img and text inline-block displays. You may also want to remove your width of the paragraph or increase it: JS Fiddle
CSS
img {
display: inline-block;
}
.p1 {
display: inline-block;
height: 50px;
width: 300px;
top: 40%;
left: 70%;
}
Related
I have an image (picture of a lawn) styled with the following:
img{
width: 100%;
height: 40%;
position: fixed; <!-- top of page-->
}
I have an <h1> Putnam Lawn Care</h1> that I would like to have overlap and be centered in the image, but am unsure how to do this with css (I have tried position:fixed; top: 20%; left: 50%; but this puts the 'P' of 'Putnam Lawn Care' at 50% so this is also not centered) ? Also I am unsure if fixed positioning is correct here, should I be using absolute? Thanks in advance for any help!
Here's with a dynamic image size and wrapping element.
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
margin: 0;
}
.wrap {
position: relative;
float: left;
}
<div class="wrap">
<h1>Loreum!</h1>
<img src="https://picsum.photos/300/200" alt="Loreum Pics">
</div>
I hope this will work. This can place the h1 tag in 100% width and text inside that will be center aligned.
h1{
position:fixed;
top: 20%;
width:100%;
text align: center;
}
Since you used position:fixed for the image, it is better to use fixed position for <h1> also.This will help to stick the <h1> always with image.
why not just put both the img and the h1 tag in an enclosing div, and then do the absolute positioning on that div - this will be more maintainable because you won't have to be setting position: absolute on multiple elements
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
I need to dynamically display 2 graphic image files that represent opening and closing quotes as shown below in the sample screen shot.
The quotes need to appear just to the left and to the right of the upper content block as shown. Content block widths will vary on the page.
I have tried float and background image. Does anyone have a tip or trick to properly, dynamically and flexibly position 2 image files?
Here is what I have so far after working with #Utkanos answer:
HTML
<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div>
CSS
div#maincontentcontainer div#primary div div.postsPage_item_content {
position: relative;
text-align: center;
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE1.png');
content: '';
display: block;
left: 20%;
height: 28px; /* background-image natural height is 28px */
position: absolute;
top: calc(50% - 50px);
width: 36px; /* background-image natural width is 36px */
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE2.png');
left: auto;
right: 20%;
}
Display
Desired results are that (1) each of the dynamically rendered quotes align with the top of the content block, and (2) the quotes dynamically position with margin padding to the left and right of the content block as shown by the red arrows.
Pseudo elements are perfect for this sort of thing.
HTML:
<div id='my_div'>
<p>Content here.</p>
<p>Etc.</p>
</div>
CSS:
#my_div {
position: relative;
}
#my_div::before, #my_div::after {
content: '';
width: 50px;
height: 50px;
position: absolute;
display: block;
background: url('path/to/open_quote_img.png');
left: 5%;
top: calc(50% - 25px);
}
#my_div::after {
background: url('path/to/close_quote_img.png');
left: auto;
right: 5%;
}
That code assumes your quote graphics are 50px in width and height - modify as required.
Finally, to ensure your content doesn't overlay the quote images, set an appropriate padding-left and padding-right on the container (in my example, the div) so the content is sufficiently pushed in away from them.
Another possibility is using absolute positioning inside a relative container. For example:
.container { width:300px; position:relative;padding:20px}
.left-quote {position:absolute; top:10px; left:10px; font-size:30px;}
.right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}
<div class="container">
<span class="left-quote">"</span>
<span class="right-quote">"</span>
<p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p>
</div>
I have an image and need to add the text "click to enlarge" underneath the image but can ony do this using CSS.
This is what I have so far, however, I cannot seem to position it properly. It seems to float to the right of the image. How can I get this to go directly under the image and to the left?
#main_image:after{
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}
Here is one way of adding the caption using pseudo elements.
Your HTML might look like:
<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>
and your CSS could be:
.main_image {
border: 1px solid blue;
padding: 10px 10px 40px 10px;
display: inline-block;
position: relative;
}
.main_image img {
vertical-align: top;
}
.main_image:after {
content: "click image to enlarge";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: beige;
text-align: center;
}
Add the pseudo element to the <a> tag and then position it as needed.
I used absolute positioning but there are other options.
See demo at: http://jsfiddle.net/audetwebdesign/fQyhj/
Just add display: block: http://jsfiddle.net/fQyhj/4/
#main_image:after{
content:"click image to enlarge";
text-align:left;
position:relative;
margin-bottom:10px;
display: block;
}
I'm assuming that your #main-image is not the image itself, but some wrapper around it since you're seeing the text.
As a reference, pseudo elements do not work on "replaced" elements: http://www.red-team-design.com/css-generated-content-replaced-elements
You have to add another <div> to do that. See the Fiddle
I have used margin-top: -80px; to put the text on image.
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>