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
Related
I want my text to be centered horizontally on the main part of the page, while behaving like the sidebar doesn't exist. I additionally also want it to be at the very bottom of the page.
#chat-form {
display: flex;
justify-content: center;
}
<section id="bottom-notice" style="position: absolute; bottom: 0px; width: 100%; background-color: red;">
<form id="chat-form">
<p style="color: #9a9a9e; font-size: 12px;">This text is the bane of my existence</p>
</form>
</section>
My idea was to have a parent div that would put it at the bottom with an absolute position, and to then
Have the child be centered horizontally like this, the justify-content centering it while respecting other divs.
However it behaves very weirdly and is too far on the right.
I can get the text to be centered respecting the sidebar and to be at the bottom, but never both at the same time.
Ive tried a bunch of stuff, but none of them brought me anywhere.
I think this will solve your problem. From the following code, your sidebar will be fixed on the left side and your text will remain on the bottom of the page without considering the position of the sidebar. For the demonstration purpose, I have written down HTML and CSS separately.
.container{
min-width:100%;
min-height:100%;
}
.sidebar{
position: fixed;
top:0;
left:0;
background-color: #000000;
color:#ffffff;
width:25%;
height:100%;
}
.text{
position: absolute;
bottom:0;
text-align:center;
width:100%;
}
<div class="container">
<div class="sidebar">My Sidebar</div>
<div class="text">
<p>This text is the bane of my existence</p>
</div>
</div>
I will be making the arrows clickable to scroll left/right in the div
I have a div which contains a bunch of elements (arrows are not included in the div for my method) as seen here
I want to align the arrows as seen in the image, however these are not responding as expected when the page is a different size due to the terrible method I have wrote.. what would be the best way to do the above?
At the moment my code looks like this:
<img src={arrowLeft} alt="Left Arrow" className="arrow"></img>
<div className="gridRow">
......content for elements here.......
</div>
<img src={arrowRight} alt="Right Arrow" className="arrow right"></img>
And the CSS:
/*Arrow images*/
.arrow {
border: 1px solid red;
position: absolute;
top: 121%;
}
.arrow.right {
left: 91.7%;
}
.arrow:hover {
cursor: pointer;
}
Thanks
Instead of giving position: absolute to the two arrows (which will make them unresponsive to screen changes), you could just wrap everything inside a div and give the div the following CSS properties:
display: flex;
align-items: center.
This way, all the elements will be in a row and vertically centered.
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
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
I've got some linked images centered in a div. After the last image, I want to add a text link. For some reason, the links don't wrap around the images, they sit below the images, meaning my text link at the end is in line with the previous links, below the images themselves. What I want is for the text link to be at least in line with the images.
Check out the JSFiddle: http://jsfiddle.net/RFzMv/
If I float the links around the images, then they are the same size as the image and everything works as expected, but then the images aren't centered in the master div. The number of images can change, as can their dimensions, so I can't set them using absolute or anything like that.
How can I get the link to be the same size and position as the image it surrounds without using float, so the following link is in line with the images?
The HTML is nearly the same as yours except for the third child div. I wrapped the text in a <span> div and then that is contained by the a.imageCount link.
<div class="centered">
<a class="image-link" href="">
<img src="http://placekitten.com/100/100" width="100" height="100" />
</a>
<a class="image-link" href="">
<img src="http://placekitten.com/110/110" width="100" height="100" />
</a>
<a href="#photos" class="imageCount">
<span>some text</span>
</a>
</div>
The CSS looks like this:
.centered {
width: 500px;
height: 300px;
background-color: #EEE;
text-align: center;
}
a {
text-decoration: none;
outline: 1px dotted blue; /* optional to show content boxes */
}
.image-link {
display: inline-block;
vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
display: inline-block;
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
background-color: lightgray;
margin-left: 10px;
}
.imageCount span {
/* in case you need to style the text in a special way */
}
You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/uBVHC/
How This Works
Basically you have three inline block child elements in div.centered, so text align works as you expect.
I assume that one of the images will be the tallest element in the line and that you would like to have some control over the positioning of a.imageCount.
If you apply the vertical-align property to .image-link, then that will determine how the images are aligned vertically with respect to the a.imageCount element. You can try out the three principal values (top, middle, bottom) and pick one that suits the design you want.
If you want to adjust the top (or bottom) position, simply use a top (or bottom) margin on .imageCount and display: top (or bottom) on .image-link.
You can adjust the horizontal separation you a left margin on .imageCount.
If you have a container div that is position relative then you can have a div inside it with position absolute that is positioned relative to the containing div and not the entire window.
This would let you keep your centered images while placing the link anywhere you want.
#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }
here is a fiddle:http://jsfiddle.net/RFzMv/39/