I am trying to make a contact form in the center of a website, but for some reason, Bootstrap and CSS' transform: translate(-50%, -50%); (used for absolute positioning in the center of a website) doesn't play well with each other.
The problem: When both Bootstrap and CSS-transform is applied, the top-line/margin of the input field is removed, making the input field look bugged.
I can remove either the Bootstrap link (HTML line 2) or transform (CSS line 6) and it will look as intended, but I need both Bootstrap (for responsive design) and transform (for center positioning).
JS Fiddle (notice HTML: line 2 and CSS: line 6):
https://jsfiddle.net/t1txvv9d/
Hope anyone know a workaround for this? I would really appreciate help. Thank you.
You are better off with flex:
body, html {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Fiddle here and more about CSS Flexbox here.
I would clean up the code a bit: Remove the margin-right: -50%; (has no effect), add position: relative to .container and also add a height or at least a min-height setting to .container (depending what you are up to, a fixed px value or a percentage, which then also requires a height definition for the parent elements)
https://jsfiddle.net/b7Lry34n/1/
Related
Top: Current situation, Bottom: What I'm trying to acheive
I am attempting to modify the language switcher at the top of this Wordpress-based website so that both the flags display next to each other, inline, without having to first hover.
https://www.furuhostel.com/
I can't figure it out, so was wondering if anyone could help? Maybe it's not possible with CSS!
Thank you!
Make these changes in your code, change these classes.
#trp-floater-ls.trp-floater-ls-flags {
width: 100px;
display: flex;
justify-content: space-around;
left: 75%;
}
#trp-floater-ls-current-language {
display: none !important;
width: 100%;
height: 100%;
}
#trp-floater-ls-language-list {
display: flex !important;
}
I have inspecting the element within chrome as no code has been supplied for this example but from what I can see you need to:
Remove the currently selected item trp-floater-ls-current-language (I did this by just display:none).
Where the class trp-language-switcher-container is, you will need to remove the defined width of 50px so that the container takes the size of its children.
And lastly you will need to set the class trp-floater-ls-language-list to display: flex.
Hope this helps and is what you are looking for.
I need to align some buttons no matter how the content of previous elements changes. This is the markup that I currently have.
I currently have the buttons at the bottom not aligned as shown in the following image:
Notice that the buttons REQUEST DEMO are not properly aligned, so what I want is no matter the content in the previous p element is, they are aligned as shown in the following image:
Notice that here I used the same text to make it look aligned, but I want the buttons to be aligned no matter what the content of the text is.
I also need this functionality to be responsive since I am using bootstrap and for smaller screens, it shows two elements or one element per line.
I was thinking to add a min-height or max-height in the CSS, but this hasn't solved my problem.
Add this to your code and see if this is what you are looking for.
Documentation for flexbox
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.col-md-6 {
flex: 1;
margin-right: 10px;
padding: 50px;
}
.btn {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
There's a few ways to do this. The easiest way would be using flexbox, here's a snippet example https://codepen.io/imohkay/pen/gpard
.parent {
display: flex;
justify-content: space-between;
}
Another way you could do it is having a fixed height for every column, and absolute position the button to the bottom and maybe add some padding to the content so the text never overlaps the button.
Add this class .btn-boxto the buttons and and this class .padbot to the box
CSS
.btn-box{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
.padbot{
padding-bottom: 80px; // Adjust as your needs
}
DEMO HERE
On this page, there are some staff photos.
On an iPad in portrait mode, the staff photos are cut off on the right hand side.
I don't mind them being cut off, but I'd like them aligned center, instead of aligned left.
Note, I want the image dimensions to be the same, just the alignment shifted to the left to become centered, so that faces show in the middle of the image boundaries.
I've tried the following solutions from this question:
.ult-ib-effect-style13.ult-ib2-min-height img {
display:block;
margin:auto;
}
and
.ult-ib-effect-style13.ult-ib2-min-height {
text-align: center;
}
and
.ult-ib-effect-style13.ult-ib2-min-height {
display: flex;
justify-content: center;
}
but none of these are working.
First of all, I checked your css and it's a complete mess !
You defenitly should rework it off a bit. All those !important statements are terribly wrong practice.
However, I tweaked up a bit your img styles and found out a solution that fits your needs.
The trick was to override all the other width and height styles that applied to your images and simply replace it by a style which only set size of images based on heigth of container.
This solution prevent your images from being distorted.
I also reset the translate3d style so the images are centered in container.
.ult-ib-effect-style13.ult-ib2-min-height img {
min-width: auto!important;
width: auto!important;
max-width: none!important;
height: 100%!important;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Result:
Edit :
Result # width: 900px
It's still good, images are centered and no distortion. However, you could make your divs wider at this breakpoint for a more elegant overall result.
See below for example :
Set the column (.col-sm-3) at 50% width and img to heigth: 120%; max-heigth: none;
EDIT:
As said in comment, try to put the <link> tag of your own css in the end of your <head> after all the other stylesheet your site loads.
This will cause your css to be rendered last and your styles to override the previous ones. Then try changing back your rules to those proposed in the explanation above.
This should do the trick.
for image you can use:
img {
display: block;
margin: auto;
width: 100%;
}
or you can use Bootstrap
then assign class "img-responsive center-block"
I know some of the solutions may work, but there's more to your problems. Its bad practice to insert an inline height or width. Plus you must know the exact size of your image, before you use it. Using image holders help with that. You used the height attribute to make your image smaller. If your image does not fit the container, then you'll always have problems that's why you must always know the exact height and width of the images that your going to use. It also help with performance. On Smaller Screens, there's more issues with your images. The right side is black out simply because of the size of the picture. With responsive design, you want your images to be more square then rectangle, even if its not perfect. The css is a mess, and you are using useless attributes and style properties and values. Simply resize the pictures with a similar width and height of the container (col-sm-3) and then use bootstrap "img-responsive" class and all will be fine.
Sorry I understood it wrong. So basically you want to center your oversized image in small div.
So your parent div (Image Parent) is positioned relatively. First of all you don't need lot of css you have written for your image class. Remove all of that from 'ult-ib-effect-style13.ult-ib2-min-height img' class.Now your code will look like
.ult-ib-effect-style13.ult-ib2-min-height img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
height: 100%;
}
Even if you not going to remove your css from image class this will work for all screen widths!
Possible duplicate of this question.You can also position your image relatively in case of absolute parent. Don't forget to use transform, moz-transform for cross browser compatibility as mentioned in link.
If your concern is only ipad portrait mode and browsers like chrome, safari or firefox, then use object-position.
object-position: center center;
object-fit:cover;
If you need support in IE or Edge then it wont work in that.
You can mention any position you want, 'center center' is 50% from left and 50% from top.
Kindly clean your code a bit, there are lot of important overrides.
Just add following CSS
#media (max-width:1024px) {
.ult-ib-effect-style13.ult-ib2-min-height img {
width: 100% !important;
max-width: none !important;
height: auto !important;
}
.ult-new-ib {
max-height: 330px;
}
}
You have this css code for images
.ult-ib-effect-style13.ult-ib2-min-height img {
width: auto!important;
max-width: none!important;
height: 100%;
}
Add also this three lines
position: relative;
left: 50%;
transform: translate(-50%, 0);
And You Win))
Just add following css:
.ult-ib-effect-style13.ult-ib2-min-height img {
left: 50%;
transform: translateX(-50%);
}
I'm trying to Vertical centering picture on my page
i tried few scripts & styles but none of them worked
my page is:
TEST.esc.bugs3.com
I'm trying to Center the "Arrow" pic on the left & right sides to the center of the main pic
today all i get is the pic is always on the "TOP" of the DIV & i wish to put in in center
Note: I don't wanna use fix size as PX i wish to make it with 50%
like main pic is the 100% height and the arrow will be show on 50% of it
Layout - how i wish it will look like
thanks for the help :)
Edit:
thanks for the answers
but i need the side div (side box) to be Vertical centered to the main div (center box)
the main pic size is not fixed (every media will have different size - so i cant use PX as position
Use CSS3 Flexbox for modern Browsers: Here's Browser support for it.
.center-both{
display: flex;
justify-content: center;
align-items: center;
height: 350px;
background: LightSeaGreen;
}
Fiddle
Read this article for more on flexbox: http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html
If you want to support old browsers like IE7/IE8 then use display: table-cell; property to place the content vertically center.
Change the css for Sidepanel class as below
.SidePanel {
width: 5%;
height: auto;
float: left;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
Use This Code For Your Pic:
.pic{
position: absolute;
top: 50%;
margin-top: -(HEIGHT/2)
}
Which HEIGHT is Your Picture's height in Pixels.
Update 1
Your Container Should Have A Specific Height And Have A CSS Property: Position: (Relative|Absolute|Fixed)
I want to center an object using CSS and no hacks, is this possible and how?
I have tried this, but than my p tag is gone.
.centered {
position: fixed;
top: 50%;
left: 50%;
}
There's several ways to center an element. But it depends on what your element is and how we choose to display it:
If you have {display:inline; }
This is simple. You can just use "text-align: center;" to center text, images and divs.
If you have {display:block;}
This is a bit more difficult. It depends on how your object is positioned. Your object could be relative, absolute, or fixed.
If it is relative; then you can use "margin:0 auto;", however you will require a width value.
If it is absolutely positioned, then you need to specify your "top:" and "left:" values. You'll also need a width. If you know the width of the element, the best way is to use {left:50%; margin-left:-X}, where X = 1/2 the width of the element.
HTML:
<div>Centered</div>
CSS:
div {
margin: 0 auto;
width: 200px;
}
Live example: http://jsfiddle.net/v3WL5/
Note that margin: 0 auto; will only have an effect if the div has a width.
Use margin: auto like this:
margin: 0px auto
Use this for general purposes. Even span or div which is inside whatever :
width:inherit; display:block;margin:0 auto;
Usage :
In-Line usage : Content goes
here....
CSS Code :
#text-align
{
text-align:center
}
HTML Code :
<div id="text-align">Content goes here....</div>
http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx
late into the game, but have you tried with display:flex on the parent ?
I have a useful class that is simple and works with all type of elements:
/* apply this on the parent */
.center {
display:flex;
align-items: center; /*vertical alignement*/
justify-content: center; /* horizontal alignement*/
}
This is relatively new but supported at ~98% of major browsers.
However I suggest that you learn a bit about flexBox, it may seem complicated at first but it is very powerful for all type layouts !
if you don't need to be position:fixed; you can just use
<center>
Hello
</center>
This is deprecated in HTML5