Here is the result of the code below:
If I make the first image bigger then I have this one (The text goes far below the image) :
Now the question is:
How do I align each text and image horizontally?
(I want the text on the middle of the image not on the lower edge)
<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'>
<b>Diamonds: {valueY.value}</b>
</span><br>
<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'><b>Performance: {Performance}</span>
Just Convert the image vertical-align property from bottom to top.
It's better to divide your structure into divs that will make controlling of elements designs much easier.
To make the text horizontally centered comparing to the images you can make it's position absolutely & push it 50% from top and push it back of it's own height. So it will be vertically centered comparing to the left image/icon. Here is what I mean:
<div class="wrapper">
<img src='https://picsum.photos/200/300/?random'>
<span>
<b>Diamonds: {valueY.value}</b>
</span><br>
</div>
<div class="wrapper">
<img src='https://picsum.photos/200/300/?blur'>
<span>
<b>Performance: {Performance}</b>
</span>
</div>
I have wrapped each block within a div element so I can make the div position relatively.
Here is the css:
.wrapper { position: relative; }
img {
vertical-align: bottom; margin-right: 10px;
width:32px; height:30px;
}
span {
font-size:14px; color:#000000; display: inline-block;
position: absolute;
/* push it by 50% from top */
top: 50%;
/* push it back of it's own height */
transform: translateY(-50%);
}
Here is the live preview
Related
I am trying to align these previous and next links to be vertically aligned with image in center and pulled sideways (it would need to be responsive, height and width of an image are always different).
Using flex with absolute positioning on previous links seems ok, it aligns to the left although centering is a problem, but the next link in that case goes outside of row, at the bottom right corner..
.previous {
color: #fff;
width: 50%;
position: absolute;
display: flex;
margin-left: 30px;
}
<div class="row-attachment-image text-center">
<a class="previous" href="#"><</a>
<img src="https://placeimg.com/640/480/any">
<a class="next" href="#">></a>
</div>
I have set a bootply
http://www.bootply.com/nh0yRF4min
If you want to use flexbox, then I'd suggest this:
.row-attachment-image {
background-color: #000;
display:flex;
justify-content:space-between;
align-items:center;
}
Demo
My div "inner_submit_data" is vertically aligned on my page using the code below. However, if I include further HTML elements below this div they appear at the top of my page, as if they are ignoring the presence of the vertically aligned div. Is there a way for HTML elements appearing after the vertically-aligned div to display below it on my page? I will be adding a lot of dynamic content to my page so I don't think absolute positions is the answer.
Here is my HTML:
<div id="outer_submit_data">
<div id="inner_submit_data">
<h3 id="instruct">STEP #1: Upload your .csv file</h3>
<div class="init_buttons" id="upfile1"></div>
<br>
<div class="init_buttons" id="upfile2">Continue</div>
</div>
</div>
and CSS to make it align vertically:
#inner_submit_data {
/* POSITION */
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 40%;
margin: -10% 0 0 -20%;
/* DIV DISPLAY PROPERTIES*/
color: #fdf2e3;
font-family: verdana,arial,sans-serif;
}
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
I have a <div> containing an image and some text. The image is supposed to come at the left corner and the text is supposed to come in the center of the <div>. But the text is coming off a little off-center to the right due to the width of the image.
How do i fix it??
<header>
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png">
<div class="title">RECIPE SEARCH</div>
</header>
header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; }
header .title { text-align: center; margin-left: 0 auto; }
You could set the image as background of the <div class="title"> and then set text-align:center in order to align the text properly.
The HTML could be just:
<header>
<div class="title">RECIPE SEARCH</div>
</header>
And the CSS:
div.title {
background-image:url('/resources/images/searchBoxProp.png');
background-repeat:no-repeat;
text-align:center;
}
You will also need to set a fixed height (equal to the image), and finally set the width you wish.
Set header to position:relative, and #searchBoxProp to position:absolute. Absolute positioning takes the element out of the layout, so it won't affect the text postion. The relative positioning on header makes sure that #searchBoxProp is positioned relatively to header, instead of the browser window.
header {
position:relative;
}
#searchBoxProp {
position:absolute;
left:0px; /* set to your needs */
top:0px; /* set to your needs */
}
Best practice is to use a background image however if not you can use position absolue like this.
header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }
<div style='height:200px;'>
SOME TEXT
</div>
how do i align "SOME TEXT" at the bottom of the div using CSS without padding?
The absolute easiest way, though not-exactly using your code example, would be:
div {height: 400px;
width: 50%;
margin: 0 auto;
background-color: #ffa;
position: relative;
}
div p {position: absolute;
bottom: 0;
left: 0;
right: 0;
}
html
<div id="container">
<p>SOME TEXT</p>
</div>
Wrap your text in an element, anything from <p>, <span>, <div>...whatever, and position that element at the bottom of its container.
You can't do it in a simple way, at least not cross browser.
You can use the display: table; vertical-align: center;
You can use JS/ CSS expressions.
You can have another element inside the div, and position it absolute in relation to the div:
<div style='position:relative;'>
<div style='position: absolute; bottom:0;>
My Text
</div>
</div>
But really, as much as I hate to say, Tables is the KISS here (if you need to veritcaly center it).
TDs can vertically align text with vertical-align, but this does not work on DIVs. It is not considered good style to use tables to vertically align elements.
You cannot vertical-align text within DIVs with CSS. You can only use padding, margin, or absolute and fixed positioning to align an text vertically.
If you use absolute positioning well, you can vertically align the text by vertically aligning a container that the text is in. However, absolutely positioned elements do not take up "space" within their container, which means you have to set a margin or padding to offset that space in the container.
Eg:
HTML:
<div id="container">
<span id="text">Some text, Some text, Some text, </span>
</div>
CSS:
#id {
position:relative;
margin-bottom: 100px;
}
#text {
position:absolute;
bottom:0;
height: 100px;
overflow:hidden;
}
# id{
display:table-cell;
vertical-align:bottom;
}
Using flex, supported in most recent browsers
div {
align-items: center;
background: red;
display: flex;
/* Uncomment to align it horizontally */
/* justify-content: center; */
}
<div style='height:200px;'>
SOME TEXT
</div>