i need some advice on how to properly center text and left or right position images within an 'a' tag.
the goal is to have button with:
- left aligned image
- text centered horizontally but left aligen if more lines of text
- all elements should be centered vertically.
- must work on most modern browsers (ex. IE below 9 does not matter)
- only using CSS
i made an exampel which seems to work with static heights (ex. 100px)
here's my Fiddle: https://jsfiddle.net/CtH9k/5819/
--
but how does i make this work properly width dynamic heights, especially the text is giving my problems.
line-height: 100%;
here's my fiddle with dynamic heights https://jsfiddle.net/CtH9k/5820/
any good advices on what i may be doing wrong, perhaps some great tutorials or thoughts on this topic.
First, be carefull. When you use position:absolute you have to add position:relative to the parent you want to position your element with. In your first jsfiddle it looked like it's working because your a, div and body are in the same position. In the second, your image gets "lost" because you added a span wrapper.
You can use this css:
top:50%;
transform: translateY(-50%);
With both absolute and relative position and you will always be sure that whatever the container or your element height it will always be centered.
so I added these properties to your current ones:
.spanText {
position:relative;
top:50%;
transform: translateY(-50%);
}
.imgWrapper{
top:50%;
transform: translateY(-50%);
}
a {position:relative;}
and it's working (try changing the "200px" height to whatever you wish:
JSFIDDLE
you can try this one:
<div>
<a href="#">
<span class="imgWrapper">
<img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /></span>
<span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</a>
</div>
DEMO FIDDLE
Try flexbox.
a {
display: flex;
align-items: center;
}
a .textWrap {
flex: 1;
display: flex;
flex-flow: wrap;
justify-content: center;
}
<div>
<a href="#">
<img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" />
<span class="textWrap">
<span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</a>
<a href="#">
<img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" />
<span class="textWrap">
<span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</a>
</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'm trying to vertically position two divs (1&2), set to 'display: inline-block'. Can't understand why vertical-align doesn't want to work?
Ps. Don't want to use flexbox...
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
.parent {
border: 1px solid red;
height: 150px;
width: 100%;
display: table;
}
.parent > * {
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div1,
#div2 {
display: inline-block;
border: 1px solid blue;
}
<div class="parent">
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
</div>
Add one more parent div and give display:table and for the immediate child set display:table-cell then give vertical-align:middle;. Please see the code.
It wasn`t working as the height of DIV hasnt been set! After setting height of DIV, vertical alignment of other one started working.
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.
This seems so trivial, but how do I make the background color or image of a div span the whole window, but keep the content in a wrapper or set width? Almost like a footer, or nav.
Like on this page in the footer, the gray and the lack parts go the whole across the page but any type is still in a set width that matches the rest of the page. Some pages have these in the middle and divide their whole page using this technique.
Thanks for any help!
For a content wrapper, make the wrapper div fixed width and use margin: 0 auto to center it horizontally - http://codepen.io/anon/pen/kwebf
<style type="text/css">
body {
background: #ff0000;
}
div {
margin: 0 auto;
width: 500px;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
For fixed width content without a wrapper, put horizontal padding on your body - http://codepen.io/anon/pen/hoKdk
<style type="text/css">
body {
padding: 0 200px;
background: #ff0000;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
you could either wrap each section in an element (A) just to span across the page and prodive the background, and wrap the content in an element (B) to center it in A. like this:
<div id="main-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<style>
#main-wrap {
background:red;
}
#footer-wrap {
background:green;
}
.content {
width:300px;
margin:0 auto;
}
</style>
or you could use an advanced solution similar to this one.
it really depends on your design and requirments
How can I style a DIV with text in it so that if takes the minimum length between a min-width and a max-width?
For example, if I have the min and max set at 200 and 400px, I want:
a div with text shorter than 200px to be 200px wide
a div with text between 200px and 400px to have the width of the text
a div with text longer than 400px to be wrapped
This jsFiddle I made explains it better: http://jsfiddle.net/LHFSn/ ...it sounds simple and straight forward but I just can't seem to figure it out.
And no, the obvious:
min-width: 200px;
max-width: 400px;
...doesn't give me what I want at all.
Setting
display: inline-block
will allow you to achieve the desired result width-wise, but will also mean the elements will be displayed inline, that is, next to one another if they fit.
You can avoid this by wrapping your elements in block-style containers. While this sounds far from ideal it's the first idea off the top of my head that works.
Expanding on your further question, you can float these elements, wrap them in a container that's also displayed inline and then block it using Rúnar Berg's suggestion of empty blocks.
See sample jsFiddle
Clearfix reference
HTML:
ACTUAL:
<div></div>
<div class="wrapper cf">
<div class="flex-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
<div class="flex-text">
Lorem ipsum dolor sit amet.
</div>
<div class="flex-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div></div>
Further content
CSS:
.flex-text {
min-width: 200px;
max-width: 400px;
display: inline-block;
background: #def;
float: left;
clear: both;
}
/* this is just to show a 200px ruler for reference */
.flex-text:after {
content: "";
display: block;
width: 200px;
border-top: 4px solid black;
margin: 0 0 20px 0;
}
.wrapper {
display: inline-block;
background: lightblue;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
You can try to set the container display to table and the inner display to table-cell.
It might get you into more trouble though.
http://jsfiddle.net/fXxV3/3/
Problem:
Your .flex-text is a non-floated block element so by default it fills the width of its parent. In this case, max-width means if your parent is larger then take on the max-width and if your parent is smaller than min-width then take that value.
On the other hand, a floated block element with no width set will shrink to the size of its contents.
Solution:
You basically have to move your min/max width to an outer wrapper div which is not floated as you did, and then float the inner flex-text inside so that the background will only fill the area containing text:
So your markup becomes:
<div class="wrapper">
<div class="flex-text clearfix">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
<div class="wrapper">
<div class="flex-text clearfix">
Lorem ipsum dolor sit amet.
</div>
</div>
<div class="wrapper">
<div class="flex-text clearfix">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
So your css becomes:
.wrapper{
min-width: 200px;
max-width: 400px;
}
.flex-text {
background: #def;
float:left;
}
Also, since you are floating .flex-text, make sure to add a clearfix.
DEMO