At the bottom of my web site at http://clearwaterfloridabeachrentals2.imbookingsecure.com/ there is a nav menu and three boxes with images. They are not centered instead they are left aligned. What CSS code can I use to center it?
This is the CSS I have:
.row-fluid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.textwidget {
text-align: center
}
Adding the .textwidget css fixed the three boxes but the menu is still left aligned. Not sure what code directly affects it.
use text-align: center on the element
Use text-align: center for the div wrapping the three images.
And make the table width="100%" for the nav menu
Flexbox only works one level deep:
flexible container and flexed child. So you need to make the menu a flex container too and then justify-content: center the child elements
Add flex: 1 to the child elements when you need them spaced evenly.
But this may not work well in your design as it is rather nested.
Essentially your footer is a column of two flexible rows
menu (row of 8 flexed columns which need to be centered on the row)
copyright (row of 2 flexed columns which seem to need space-between)
React on this first so I can help you further with restructuring
Related
I'm trying to achieve a menu very similar to the one here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_right
except - I want it to be at the bottom of a div.
(If you can imagine an image box that has that kind of nav bar at the bottom - with the image on the layer below the menu because I might want it to show through a partial opacity).
I thought it would be very simple with a bit of absolute and relative positioning. But I'm getting really messed up, with the contents of the nav being moved about, and the buttons to the right moving left.
<header>
<nav class="main">...</nav>
<nav class="sub">...</nav>
</header>
just apply space-between to header element:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
I am essentially trying to imitate float: right with images in a row and I am getting a mysterious space above the parent item when I do it. I am using flexbox in the elements and I tried to achieve the float: right type functionality by using the order: 2 property. Here is a screenshot:
A live sample of the app can here: removed link, because in development, forgive the long load times. Just click "play"
Since there are two app-team components inside app-game component make app-game as a flex container so app-team components will be flex items.
.app-game-class {
display: flex;
/* align-items: center; */
justify-content: center;
}
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
We're using flexbox in our Angular 2 app but I'm running into an issue where, while once data is loaded the div containing pagination components appears below the data, in the second or so where the data is still loading the pagination components float to the top of the screen. I want to lock the position of the pagination components so a user doesn't see that movement. This is the css for the pagination component:
.pagination {
display: flex;
justify-content: flex-end;
}
What can I add to force this to position at the bottom of the page so it doesn't float to the top before the data loads? When I tried adding position: fixed and bottom: 0 it overrode other flex positioning and aligned left, when it should be right. So I want to use flex to do this - not standard css.
So, to summarize, I need this to force align right, AND align bottom.
.pagination {
display: flex;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
}
An initial setting of a flex container is flex-direction: row. This means that the main axis is horizontal and justify-content – which only works on the main axis – will align flex items horizontally.
For vertical alignment in a row-direction container use align-items (for a single line container, i.e., nowrap) and/or align-content (for a multiline container, i.e., wrap)
I have 3 elements inline block with each other. The 2 smaller grids are flush with the bottom of the larger chart by default. How can I get them to be flush with the top of the larger chart instead. http://i.imgur.com/TAUG2rZ.png
I would prefer to not have to give an absolute position to each element, unless thats the only way.
all thats applied atm:
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;}
Add vertical-align:top to css if you want to align them to top.
Other options for vertical-align which you may want are: middle, baseline, bottom etc.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;
vertical-align: top; }
If, by default, the elements don't end up aligning themselves towards the top, I would use the vertical-align property to position each of the inline-block elements to the top.
I've created a simple CodePen that demonstrates this more clearly. Notice how I style each of the div elements on the page:
div.element {
display: inline-block;
vertical-align: top; /* aligns each of the divs to the top of the container */
}
In this case, the element ids are arbitrarily named element1, element2, and element3, but you would probably name them smallgrid1, largechart, and smallgrid2 respectively.
Hi there you could try this
#smallgrid1, #largechart, #smallgrid2{
display: inline-block; vertical-align: top}