I have an image and I want to have multiline with <br>. The text needs to be aligned in the middle.
<table id="myTable">
<tr>
<td>
<a>
<div>
<img class="vertical-align-icon-middle" src="/images/friendjoined_icon.png" />
</div>
</a>
<div class="user-details">
<div class="username-div"><span class="text-design">My profile</span></div><br/>
<div class="points-rank">
<span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span></div>
</div>
</td>
<td class="right-icon"><p>hi</p></td>
</tr>
</table>
I have no idea what can I do to keep the text in the middle, because the image is responsive, it's resizable. Need some help, thanks.
What I want:
is something like this
As I've mentioned in my comments, you should avoid using tables for layouts, if you want to have an image and text side by side, I'd use two divs so you'd have something like:
.image-block,
.user-details {
display: table-cell;
vertical-align: middle;
padding: 5px;
}
<div class="image-block">
<img class="vertical-align-icon-middle" src="http://placehold.it/400x200/" alt="" />
</div>
<div class="user-details">
<div class="username-div">
<span class="text-design">My profile</span>
</div>
<div class="points-rank">
<span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span>
</div>
</div>
Related
So I have this code for my assignment but I can't figure out how to make the image goes to the side of the text. It keeps going to the right corner. Can someone help me out please? I just started to learn CSS. Thank you in advance.
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
<img src="cy.png" alt="IMG">
Make a table
<table>
<tr>
<td>
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</td>
<td>
<img src="cy.png" alt="IMG">
</td>
</table>
Could you clarify, are you trying to get it to go to the right side of text?
Typically, the align property of the img tag is what you want, and you usually want it before the thing you are trying to align it with.
I also recommend sharing a jsFiddle so that people can play with the code.
<img src="https://images.pexels.com/photos/13728847/pexels-photo-13728847.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="IMG" align="right">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><be>
https://jsfiddle.net/f1e7b6d8/
Nice to see you are started journey of css.
There is X ways to solve your problem with the help of css.
Float
Flexbox
Grid
Position
So for a beginner I would like to solve your problem with the help of float.
if you can not understand my code then you can take reference of any website to learn about css float property.
-------------CSS FILE-------------
.content {
float: right;
}
.image {
float: left;
}
.clear {
clear: both;
}
------------- HTML File -------------
<div class="content">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</div>
<div class="image">
<img
src="your_image_path"
alt="IMG">
</div>
<div class="clear"></div>
</body>
You have many ways to make this by CSS
you can use Float , FlexBox , Grid, Position
You can keep your HTML as it's but with a simple modification to put your img tag under the text
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<img src="cy.png" alt="IMG">
<button class="but1">Example</button>
<button class="but2">Example</button><br>
In you CSS file you can use
.txt {
float: left;
}
.img {
float: right;
}
button {
clear: both;
}
Hope this fix your issue.
I have the following HTML-code:
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum dolor sit amet
</span>
</div>
The problem: CSS doesn't treat like a normal linebreak, and therefore the whole text goes in it's own line, instead of "Lorem ipsum do-" being in line with the "1️".
This is what i want it to look like:
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum do-<br>lor sit amet
</span>
</div>
How do I achieve this?
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum do-
</span>
<span style="display: inline-block; vertical-align:top;">
lor sit amet
</span>
</div>
You can try this
I found a solution myself - simply use display: flex; on the parent.
<div style="width: 140px; display: flex;">
<span>1️</span>
<span>
Lorem ipsum dolor sit amet
</span>
</div>
I am wondering if it is possible to left align text below center aligned text, so that both texts start from same position.
In the example figure. The TITLEs are center aligned and the copy below is left aligned.
How can you realise something like this with CSS?
Here is a JSFiddle to start from
https://jsfiddle.net/j5p7v8m9/
<div>
<p style="text-align: center;">TITLE</p>
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Here is the answer. I've updated your JSFiddle. You need to add some wrappers for each divs, then you can centerize the title as follows:
HTML:
<div class="container">
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
CSS:
.container{
display: block;
}
.col{
float: left;
width: 33.33%;
}
.contents{
margin-left: 20px;
margin-right: 20px;
}
.title{
text-align: center;
}
JSFiddle: https://jsfiddle.net/53oLpvqg/
Please try with bootstrap css it my help you for easy css.
<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>
</div>
Check Fiddle https://jsfiddle.net/0h2nmj3r/
*Look at other answers for directions on align text this is answer will help with getting that column effect
The best way to get three columns like that is to use a type of special display in css called "flex". Flex allows you to easily align elements within the parent html element.
.container{
display:flex;
flex-direction : row;
justify-content: space-around;
}
.text-box{
display: flex;
flex-direction:column;
align-items:flex-start;
width:20%;
}
p{
margin: 0 0 5px 0;
}
<div class="container">
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
So as you can see I have applied flex to both the container and the text-box's. Left align can be used like in these other answers but i opted for align-items:flex-start so any element within the text-box will be aligned to the left.
By setting justify-content:space-around it makes each element within the container have equal space around it so if you were to change the window size the spaces would be relative and change. I would recommend studying more about flex and grid to improve your css skills.
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
I am attempting to show a thumbnail picture and below the thumbnail, I want to have some text. Ideally I think I want to wrap the image and the text in a div whose style is set to be inline.
So imagine 3 pictures going across the screen from left to right and underneath each picture is a description of the picture.
How do I accomplish that?
Im with seb nukem here. I would use display inline-block.
One way you could do this is by enclosing each image and description pair within a div element and then just floating those divs to the left.
DEMO: http://codepen.io/sajadtorkamani/pen/xbbrzE
HTML
<div class="gallery">
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
</div>
CSS
.gallery div {
float: left;
margin-right: 1em;
}
Put each image + caption within an inline or floating block:
CSS
div.image {
display:inline-block; /* or use float:left; */
}
.caption {
}
HTML
<div class="image"><!-- one div per image -->
<img src="image.png">
<div class="caption">Caption text here</div>
</div>
<div class="image">
<img src="image2.png">
<div class="caption">Caption text here</div>
</div>
...
demo: http://jsfiddle.net/5s5s4otc/
I would use the HTML <table> element. Try something like this:
table {
width: 100%;
}
td {
text-align: center;
}
<table>
<tr>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
</tr>
<tr>
<td>Description goes here.</td>
<td>Description goes here.</td>
<td>Description goes here.</td>
</tr>
</table>
I hope this helps! Leave a comment below if you need additional help.
DEMO: http://jsfiddle.net/pwee167/67oc6k7r/\
The outcome will be something like this:
HTML:
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
CSS:
.container
{
float: left;
max-width: 128px;
}
Note: I assumed the dimensions of your thumbnails will be the same (as is in most use cases of thumbnails), which allowed me to set the maximum width (using max-width) of the container holding the image and the description. This will prevent the text from overflowing, and expanding the container.
Use either float or inline-block on the container divs. See jFiddle here: http://jsfiddle.net/ckk2jprr/
HTML
<div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
</div>
CSS
.pic{
float: left;
}