I've been trying to center my YouTube video embed but it just won't work properly.
I've tried flexbox and center tags in html, this is the closest I've gotten, really need some help here
My Code:
CSS
.Video {
display: inline-block;
position: absolute;
padding-left: 15px;
padding-right: 15px;
transform: translate(0,-50%);
}
The issue is your css is wrong. Get rid of the position, display and transform. I'm pretty sure you don't need any of those.
Checkout this jsfiddle I made. I think you're looking for margin: 0 auto;. Make sure the embedded videos are wrapped in a div, then apply the margin. If you already have a margin-top or margin-bottom, then just set margin-left: auto and margin-right: auto;
To use flex-box, this works:
Embed your .video in a .flex-container. Give this .flex-container a width and a height. And add the following properties to the .flex-container: justify-content and align-items set them both to center. Thats it.
Check this codepen. I used joes (above) HTML markup.
Also take a look at the out-commented markup above the codepen.
It's just important that the elements you want to center are direct children of the element the flex property is applied to.
Related
I have a DIV with position absolute that contains an INPUT field, i need this input to be centered vertically and horizontally inside the div which i have accomplished with display:block and text align, the problem is that the width property is not working the same way for IE (10 and below), the parent div have the proper width in chrome and firefox but a totally different one in IE10,9 and 8.
Just in case this information is relevant, the parent div is inside another div with position relative. I know it sounds like a question from back to the future but i was really surprised to notice that that im still having this issue after normalizer, etc.
Here's the code
HTML and CSS
<div>
<input type="text" />
</div>
div {
position:absolute;
background: blue;
width: 180px;
padding:8px 0;
display:block;
}
input {
border-radius: 5px;
margin: 0;
height: 20px;
position: relative;
display: block;
margin: 0 auto;
}
The problem is caused by the em units.
If you compare IE and Chrome you will see that the green bar in the menu is more to the left in IE than Chrome. That is because there is a pixel difference here and there in the font-size.
They are calculated differently. I think IE approximates differently.
Maybe instead of trying to make the 2 browsers look the same, you could make it look good on both browsers. Users will not know.
Use either a CSS file that gets added in IE browsers, or detect the browser with javascript and add classes on body (similar to modernizr), or use CSS hacks.
I have a text that I want in a specific color that says something about a text below it. I want that text to be centered so I use
margin: 0px auto;
But it doesnt position in the center and instead it gets positioned in the left of the screen. Simply put, whats the easiest and most effiecent way to center an element. ANY element.
text
text-align: center;
tags
margin: 0 auto;
other tags
left: 50%;
All methods are correct.
Keep in mind that text align do not have effect on inline level elements.
margin: auto is not a hack , it is perfectly relevant and correct according to the specification.For learning more about margin: auto see this link http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins
The best way to center text is
text-align: center;
If you use the margin: 0 auto; technique the element needs to be a block-level element or given display: block; and you need to give it a width (in px or %).
There are various techniques for centering elements. Usability of those techniques depends on other properties, inherited or you applied via css. For example, for centering an inline or inline-block level element, you may use text-align:center; to the parent. But for centering a block level element, you have to use a specific width along with margin:0 auto;. Certainly there have other techniques too.
I'm having much problems with my header.
I'm using joomla 2.5 and I've installed maximenuck for the header, but I can't center it at screen.
You can see my web here: http://www.barataweb.es/lourdes/.
I hope this code may help you
.maximenuck{
width: 960px;
margin: 0 auto;
}
paste this code in your .css file and check it weather its center or not.
......................
......
Hi now used to this css
#header ul.menu.maximenuck {
margin-top: 44px;
position: static;
width: 1000px;
}
your navigation define is position absolute than first you change to position and now define your navi min width than apply css according to your design
First of all, you're doing something wierd with the placement (#wrapper2, #main)
You cannot center it, even using Selva's answer, because the ul has position:absolute. Change it to relative, then apply Selva's values.
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone