css除法,CSS calc（）百分比余数乘除法

嘿那里它是可行的，以计算这在CSS？CSS calc()百分比余数乘除法

100％ - 650像素/ 2 * 100/100％

我有一个div contaniner与调整窗口大小长得那么在该容器中，我有一个iframe是最大宽度必须是650像素，我想十个分量对齐在容器的中心，使用左侧为此，我用/ 2来确定的左侧宽度和右侧上的空间，我尝试使用这个，但不起作用：

left: calc(((100% - 650px)/2) * (100/100%));

任何帮助将apreciated

谢谢

完整的CSS代码：

#video_externo {

background: #222222;

text-align: center;

width: $c;

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

iframe,

video,

object,

embed {

position: absolute;

top: 0;

left: 0;

height: 100%;

max-height: 400px;

width: 100%;

max-width: 650px;

border: 0;

@media (min-width: 768px) {

left: calc((100% - 650px/2 * 100)/100%);

}

@media (min-width: 1024px) {

left: 0.7575757575757576%;

}

@media (min-width: 1200px) {

left: 9.375%;

top: 7.894736842105263%;

}

@media (min-width:1500px){

left: 20.72072072072072%;

top: 19.20115495668912%;

}

}

}

解决工作CSS：

#video_externo {

background: #222222;

text-align: center;

width: $c;

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

iframe,

video,

object,

embed {

position: absolute;

top: 0;

left: 0;

height: 100%;

max-height: 400px;

width: 100%;

max-width: 650px;

border: 0;

@media (min-width: 768px) {

left: 50%;

transform: translateX(-50%);

}

@media (min-width: 1200px) {

top: 7.894736842105263%;

}

@media (min-width:1500px){

top: 19.20115495668912%;

}

}

}

替代解决方案随着Flexbox的：

#video_externo {

width: 100%;

display: flex;

justify-content: center;

background: #222;

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

iframe {

position: absolute;

width: 100%;

max-width: 650px;

height: 100%;

max-height: 400px;

top: 0;

left: 50%;

transform: translateX(-50%);

}

}

只是有与顶级的烦恼：我认为是填充到部队显示16：9视频

2016-02-25

Erick ls

+0

所以你想对齐容器中心的最大宽度为650px的iframe？你可能不需要calc，你可以做'transform：translate(-50％);左：50％;' –