I am looking for solution of how can I align text with image and the image remains unstretched.
I am using the following code which in reactjs
return (
<div className="App">
<div style={{ marginTop: 10 }}>
<div className="import-option">
<img
src={`https://uploads.codesandbox.io/uploads/user/7b703edc-140c-4f14-aa28-17e618788f1e/9zzd-download.png`}
/><span className="import-option-button"> User Import(CSV)</span>
</div>
<div className="import-option">
<img
src={`https://uploads.codesandbox.io/uploads/user/7b703edc-140c-4f14-aa28-17e618788f1e/9zzd-download.png`}
/><span className="import-option-button"> User Import(Export)</span>
</div>
</div>
</div>
);
and following css
.App {
font-family: sans-serif;
text-align: center;
}
.import-option-button {
text-decoration: underline;
font-size: 12px;
color: #4da1ff;
}
.import-option-button:hover {
cursor: pointer;
}
.import-option {
padding-bottom: 5px;
}
Here is the demo which contains the code.
This is what I want to achieve
Problems in the demo are
Image is stretched
It is not aligned to left like in the screenshot
How to solve above problems.
Please help.
Thanks.
At the moment you have .App as text-align: center. this means that all your text in the code will be centre aligned unless you state otherwise in the child divs.
.import-option {
padding-bottom: 5px;
text-align: left!important;
margin-left: 350px;
}
Here is your demo updated
Add CSS for image:
**.import-option img { vertical-align: bottom; }**
I have checked and modified your code please use the following css in addition
.import-option {
padding-bottom: 5px;
clear: both;
}
.import-option img{
width: 20px;
height: 20px;
float: left;
margin: 0 4px 0 0;
}
.import-option span{
float: left;
padding: 7px 0;
}
Updated Code Demo : https://codesandbox.io/s/y05167v0lv
Just simply apply flex property to the .import-option
.import-option {
display: flex;
align-items: center;
}
Related
I have a text inside the div with class message, and I want to move the div to vertical center with respect to parent div with class banner.
Please refer the JsFiddle here - https://jsfiddle.net/1rbhuwfs/
Whenever I try to set margin-bottom, it goes increasing beyond the parent div indefinitely, which I don't understand why. The parent div has display: block on it.
I prefer not to have any position: absolute in my code.
Thanks in advance.
Check below snippet, I have added
.banner > div {
vertical-align:middle;
}
and removed margin-bottom: 40px; form .message.
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.banner > div {
vertical-align:middle;
}
.img-1-holder {
display: inline-block;
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
display: inline-block;
}
.img2 {
height: 100px;
}
.message {
display: inline-block;
}
<div class="banner">
<div class="img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="message">
Some random text here
</div>
<div class="img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
Check jsfiddle, put parent to display:table and child to display: table-cell and vertical-align: middle.
https://jsfiddle.net/ggq39acr/
You can refer this too. https://www.w3.org/Style/Examples/007/center.en.html
The solutions suggest in this link works in general ! :D
One way to vertically center without position: absolute or using tables - and respecting your margin-bottom on image and text-div - is to use flexbox:
Add/change this:
.banner {
display: flex;
align-items: center;
}
https://jsfiddle.net/5496yk1k/
you can use flexbox fiddle
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: flex;
justify-content: center;
align-items: center;
}
In this case you can remove the margins on
.img1 {
height: 70px;
}
.message {
display: inline-block;
}
You can try to include a common class suppose img-inline with inline css properties and manage other css properties in your classes .img-1-holder, .img-2-holder and .message
Here is a sample code for you. You can try it in your jsfiddle. Sorry I am not posting fiddle link here.
HTML CODE
<div class="banner">
<div class="img-inline img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="img-inline message">
Some random text here
</div>
<div class="img-inline img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
CSS CODE:
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.img-1-holder {
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
margin-left: 15px;
}
.img2 {
height: 100px;
}
.img-inline {
display: inline-block;
vertical-align: middle;
}
Hope this helps :)
I have the following block of CSS/HTML:
<html>
<head>
<title>{CODE} Pink</title>
<style>
.leftLogo {
float: left;
border: black solid;
background-color: black;
color: white;
font-family: Courier, Courier New;
}
.rightLogo {
float: right;
border: black dashed;
background: pink;
color: black;
}
.logo
{
height: 50px;
line-height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
font-size: 3em;
}
</style>
</head>
<body>
<div class="leftlogo logo">{CODE}</div>
<div class="rightlogo logo">PINK</div>
</body>
</html>
What it's currently doing is this:
What I'd like it to do is this:
I know I can do this with positions, but what's the best way to do this so the two will stay next to each other in a variety of scenarios?
Change your code for the .rightlogo class to reflect this:
.rightLogo {
float: left;
}
instead of what it is currently:
.rightLogo {
float: right;
}
Note: Also, be mindful of your capitalization of the classes. I noticed that in your CSS, you use .leftLogo but in your HTML, you use .leftlogo. I'm not sure how deep the browser requirements go for being that strict, but I wouldn't put it past IE to mess something up.
The result:
.leftLogo {
float: left;
border: black solid;
background-color: black;
color: white;
font-family: Courier, Courier New;
}
.rightLogo {
float: left;
border: black dashed;
background: pink;
color: black;
}
.logo
{
height: 50px;
line-height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
font-size: 3em;
}
<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>
You can easily do this by adding float: left; to your .logo class and removing the float property inside .leftLogo & .rightLogo
I think the best approach for this question is to set the two logos(divs) inside a container, to have an absolute position so they overlap and then the one you want in the right give it a right of 100%.
html code
<div class="container">
<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>
</div>
css Code
.container{
position: absolute;
}
.rightLogo {
right: 100%;
}
I have only put the code that needs to be add to what you currently have.Good Luck
Hope this answer your Question T04435...
PS:The divs in the original post have miss spell in the class names the l should be Capital L leftlogo ---> leftLogo and same for right
You can use float:left for right div, and resize width with media queries for resolution where second div go to bottom.
Ok, so i have been looking around for someone with the same problem as me, but didn't find any(almost 100% shure some of you guys are going to link to to one).
I have managed to center a div inside a div which again is inside footer(pretty shure overkill). But my problem is that i have centered two images with two lines of text connected to them. I want the text to be displayed vertically centered(with the image in mind), and not in the bottom right corner of the images, like now.
Pretty shure it's something simple, but here is a link:
http://jsfiddle.net/rdsdmuw8/
<footer>
<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
+47 930 98 907
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
Bryter-pedersen#hotmail.com
</div>
</div>
</footer>
*{
margin: 0px;
padding: 0px;
color: #fff;
}
footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}
#sosial {
text-align: center;
vertical-align: middle;
}
#sosial a{
list-style-type: none;
text-decoration: none;
}
In order to vertically align the img elements next to the anchors set vertical-align: middle for both of the elements.
#sosial img,
#sosial a {
vertical-align: middle;
}
In order to vertically center all the containing elements within the footer, you can use the table-cell/table approach.
#footer {
height: 100%;
width: 100%;
display: table;
}
#sosial {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Updated Exmaple
I removed the inline CSS styling in the example. You can use img:nth-of-type() to apply the margin to the second element. Just throwing options out there.
#sosial img:nth-of-type(2) {
margin-left:50px;
}
if you know what is the height you want for the images you can use, in my example is 50px:
#sosial a {
list-style-type: none;
text-decoration: none;
line-height: 50px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.
What is the best way to vertically center the text in my blue box?
markup:
<div class="btn-blue">
<span class="icon"></span>
Some awesome text here
</div>
and the styles:
.btn-blue {
background-color: #446598;
color: #fff;
display: inline-block;
padding: 0 20px 0 0;
line-height: 0;
}
.btn-blue .icon {
width: 50px;
height: 50px;
display: inline-block;
background-color: #00356b;
margin-right: 10px;
}
Here is the fiddle
http://jsfiddle.net/fSa6r/
Thanks.
Add line-height: 50px; to the .btn-blue class and
vertical-align: middle; to the icon class
FIDDLE
When only one line of text is needed, I find that setting line-height to the height of the box is the easiest way to vertically center text.
There are lots of ways to vertically align text, which you can check out here: http://www.vanseodesign.com/css/vertical-centering/
My personal favourite is using CSS tables (not html tables):
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
This is another method to show a link as a button with icon. You could to improve this code using an sprite instead two separated images:
a.mybutton {
padding: 3px 0px 3px 30px;
color: #c00;
}
a.mybutton:link,
a.mybutton:visited,
a.mybutton:active {
background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_off.png") left center no-repeat;
}
a.mybutton:hover { background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_on.png") left center no-repeat; }
Here is the: fiddle