So I have a "post" box, and that will contain an avatar and the post. The issue is when I add an image the text drops below the image. Here's what I'm talking about
All I want to do is align the picture with the text. Here's my code for the image
cursor: default;
height: 74px;
width: 74px;
border-radius: 50% 50% 50% 50%;
margin-right: 19px;
vertical-align: middle;
margin-top: -19px;
display: inline-block;
And here's a demo. Its not the most complete demo, but it works. Any help would be nice. I'm trying to align the text with the image
You could float your image to the left.
img {
float: left;
}
Have a fiddle!
or you could position absolutely (might be more appropriate).
.post {
position: relative; /*Make absolutely positioned children relative to their .post parents */
}
.post img {
position: absolute;
top: 50%;
margin-top: -37px; /* negative. half of height/*
}
This will keep your image in the center of the post.
Have a second fiddle!
use css:
float:left;
Here is a JSFIddle: http://jsfiddle.net/UWtEF/
hope that helps
I saw your code and if I understand your problem, you want text align on the right of avatar.
Actually you know the avatar size then the most simple solution is first to create context for position, then :
.post{position:relative;/* your other properties here */}
now you have a context, you can add absolute for your avatar like :
#IMG_1{position:absolute;left:0;top:0;/* your other properties here, don't forget to remove margins */}
/* I suggest you to replace #IMG_1 by .post > img{} */
now you need only to add padding-left inside your block content for post then :
.post{padding-left:84px;/* your other properties here and don't forget position:relative; */}
Now you need only to correct others selectors like .message, .likes, .time to remove paddings (padding-left in .post is enough).
I hope this help you.
Related
I tried to make a text inside a div, I made code saying: text-align:center; and padding:30px 0px; but padding is NOT working..the text just stays at the top of the div, but should be in the center..(from top to bottom).
Maybe is it because of the div's position absolute??
I don't know, please help me
Since the div's position is absolute, You can use the top, bottom, left, and right attributes to add a padding around the div.
text-align: center; is used for horizontal alignment.
For vertical alignment, there are other methodologies you should use. Take a look at this link, it gives you all different bits and pieces:
https://css-tricks.com/centering-css-complete-guide/
.container {
position: absolute;
text-align: center;
padding : 30px 0;
}
Your css may be look like above css code. If you given absolute position for the div you are removing the flow of the div from the dom tree. so its width may be shrink to the content of the text width. So you need to mention the width for the div as below. it will work jsfiddlelink
.container {
position: absolute;
text-align: center;
padding : 30px 0;
width: 100%;
}
Why don't you use line-height: [height of div]?
.container {
position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;
}
Then it should be centered. I Hope I helped! :-)
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
I'm trying to make these icons with just CSS (except for the white icon). The problem I'm running into is that if my icon's name exceeds the width and starts wrapping the text starts overlapping the image (as it is shifted upwards, as seen on the second element), what I need to have the text do is shift downwards (as shown on the third element).
Here is my html:
<div class=circle><label>Manage Queries</label></div>
And here is my CSS:
.circle
{
float:left;
position:relative;
border-radius: 50%;
width: 128px;
height: 128px;
background: #C70C11 url('myimage.png') no-repeat center center;
}
.circle > label
{
font-family:arial;
position: absolute;
bottom: -20px;
text-align:center;
width:inherit;
}
I have tried vertical-align but I haven't found any success with it.
Instead of bottom:-20px, try top:100%
Here is a proof of concept: http://jsfiddle.net/eZcRk/
Just set the top property of the label to the height of the div
.circle > label
{
top: 128px;
}
DEMO
To get vertical-align to work, you need to set the parent tag to have display: table. Then you set the tag with these properties:
display: table-cell;
vertical-align: bottom;
Tried setting vertical-algin:bottom; and display:inline; for your label ?
first off I would like to say thanks to those who have helped me out before on here.
Ok the problem is this: I have several images which are placed inside a a div called "Banner"
at the top of my web site. I also have a text link to facebook which is floated to the right. They are each centered using the following css...
#banner img {border:none;
margin:0 auto;
display:block;
}
a#social_network {
float:right;
margin:10px;
padding:0px;
}
I have also floated a link to facebook to the right, which is given an id called "social_network" and is also within the banner div. The problem is that when I float this textual link right my top image is no longer centered. I thought that maybe I needed to clear the float but that did not work I was doing it wrong.
All suggestions are appreciated.
Maybe you can try this:
#banner {
position: relative:
}
#banner img {
border: none;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /* <--- Here's 1/2 of the width of the image */
margin-top: -50px; /* <--- Here's 1/2 of the height of the image */
}