我找到了一种使用jQuery来居中div标签的方法，它适用于除此之外的所有内容。此文件http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.1.js中的函数jQuery.fn.center（文件中的第一个函数）是我如何居中div标签但由于某种原因它不能使用此文件。我尝试将ID为current_playlist的div置于下方的js片段中，但它会将div的左上角居中。
不知道为什么但片段不能正常工作。这是我http://miilikesyoshi.gigaboywebdesigns.com/遇到问题的网站，只需点击其中一张图片，您就会看到我的中心问题。
$(document).ready(function() {
var top = Math.max($(window).height() / 2 - this.offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - this.offsetWidth / 2, 0);
$(".bg_fader").click(function() {
$(".bg_fader").css("display", "none");
$("#current_playlist").remove();
$("iframe").remove();
enableScroll();
$("body").css("overflow-y", "scroll");
});
var playlist_note = "<p><b>NOTE:</b> Click navigation button on top left corner to view other episodes in playlist.</p>";
$("#playlist1").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/1oyqANxWF00?list=PL1L8ZIWcaEsJpzvQgmZwrPJgoyCHTorz8&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Mario Kart Wii let's play playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist2").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsKdkpuaxAgUl1_SjJ73R4Zy&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my let's play for Custom Track Grand Prix (CTGP) a hack for Mario Kart Wii.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist3").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsIB__j4jeRx8f9YBswNYWLc&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my playlist for the time trials mode in Mario Kart Wii.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist4").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsLFTcJIUH-3eaMgvjDtrotR&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is the New Super Mario Bros Wii playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist5").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsI0YyycljxC7QitO-cPiOXl&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is the Super Smash Bros Brawl Project M Free-For-All (F4A) playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist6").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsLWe_L32jDRU9eaa5equmeg&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> Music from Mario Kart Wii that is 30 minutes long.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist7").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsK8lu8V0_bf-P_r4THCWzsG&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Boom Beach playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist8").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsJUtU7E7FYpgnJsBGscMb0V&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my musical instruments playlist where I play Nintendo music.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist9").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsIDU1d1IV2xnxTnB04xDGHq&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my blue-shell dodges playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist10").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsKheiHBR3SxeyEi4SaDsF_A&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my playlist for Star Warfare 1 and 2 gameplay.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
});.pause_bttn {
display: none;
}
.bttn {
color: #00ACED;
cursor: pointer;
}
.contact_me_wrapper {
margin: 50px auto;
width: 45%;
background-color: white;
box-shadow: black 0px 2px 7px;
padding: 15px 10px;
}
legend {
font-size: 30px;
font-family: Digital;
background-color: white;
border-top: 2px solid lightgrey;
border-right: 2px solid lightgrey;
border-left: 2px solid lightgrey;
border-radius: 3px;
}
.bg_fader {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 200%;
opacity: 0.7;
display: none;
}
.playlist_link {
margin: 0px 15px;
float: left;
}
#current_playlist {
background-color: white;
border: 2px solid lightgrey;
border-radius: 5px;
box-shadow: black 0px 2px 7px;
}
#current_playlist > iframe {
margin: 10px;
border: 2px solid black;
border-radius: 3px;
}
#current_playlist > p {
padding: 5px 10px;
width: 550px;
}<!DOCTYPE HTML>
<HTML lang = "EN-US">
<head>
<meta charset = "UTF-8">
<meta name = "title" content = "MiiLikesYoshi">
<meta name = "description" content = "This is the official website for MiiLikesYoshi on YouTube.">
<meta name = "author" content = "Adam S. Oates">
<title> Playlists </title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" href = "main.css">
<script type = "text/javascript" language = "javascript" src = "http://code.jquery.com/jquery-3.1.0.js"></script>
<script type = "text/javascript" language = "javascript" src = "http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.1.js"></script>
<script type = "text/javascript" language = "javascript" src = "main.js"></script>
<script type = "text/javascript" language = "javascript" src = "playlists.js"></script>
<audio id = "fancyMusic" loop>
<source src = "audio/music.mp3" type = "audio/mp3">
</audio>
</head>
<body>
<header>
<div class = "facebook_icon icon">
<a href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjR1PDI9Y7PAhUg0IMKHfDjBVkQFggeMAE&url=https%3A%2F%2Fwww.facebook.com%2FMiiLikesYoshi%2F&usg=AFQjCNELIMTOxlZJ6Tztl1xLMJF79DKqQg&sig2=VD_lUAGE_CgypA7OW2Y49Q&bvm=bv.132479545,d.amc">f</a>
</div>
<div class = "google_plus_icon icon">
<a href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&sqi=2&ved=0ahUKEwja3Z-Q9o7PAhWU8oMKHTYlC1YQFgg-MAY&url=https%3A%2F%2Fplus.google.com%2F%2BGigaboyWebDesigns&usg=AFQjCNHKXSjVOBodSa8OuVj8s950ke0OWw&sig2=KH2I_ahP5bLWwNT7BxG5Mg&bvm=bv.132479545,d.amc">G+</a>
</div>
<!-- Remove "style = 'desplay:none;'" when you get twitter for GWD. -->
<div class = "twitter_icon icon" style = "display:none;">
<a href = "http://www.twitter.com/"><img src = "images/bird.png" class = "twitter_img"></a>
</div>
<div class = "upcoming_events">
<span class = "upcoming_title_wrapper">Upcoming Livestreams: </span>
<span class = "time_wrapper">
<span id = "days_countdown">00</span> Days
<span id = "hours_countdown">00</span> Hours
<span id = "minutes_countdown">00</span> Minutes
<span id = "seconds_countdown">00</span> Seconds
</span><br>
<span class = "event_wrapper">No upcoming livestreams.</span>
</div>
</header>
<div class = "logo_wrapper">
<span class = "logo_text">Mii Likes<br> Yoshi</span>
</div>
<div class = "links_wrapper">
<a href = "index.html">Home</a> |
<a href = "videos.php">Videos</a> |
<a href = "playlists.php" class = "current_link">Playlists</a> |
<a href = "contact-me.php">Contact Me</a>
</div>
<section class = "main_section_wrapper">
<figure>
<span class = "pointer_cursor playlist_link" id = "playlist1">
Mario Kart Wii Let's Play || #1<br>
<img src = "https://i.ytimg.com/vi/F4j2RovjbVE/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=3WpUrFrz70HB3qrKeL4-k9GHExk" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist2">
Custom Track Grand Prixs || #2<br>
<img src = "https://i.ytimg.com/vi/8VhN6PuKJQQ/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=qfCgzBads5L8HEjnMvcG5meB2Yo" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist3">
Mario Kart Wii Time Trials || #3<br>
<img src = "https://i.ytimg.com/vi/BPU_JjC0sRs/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=bGEUMrcSPUiXAOPXjq3RHYJYcPU" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist4">
New Super Mario Bros Wii 2-Player || #4<br>
<img src = "https://i.ytimg.com/vi/cvdToX0qpJA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Q_9f0HZBMdr1cuXFRbOluDgcLtY" class = "playlist_img">
</span><br>
<span class = "pointer_cursor playlist_link" id = "playlist5">
Super Smash Bros Project M F4A<br>
<img src = "https://i.ytimg.com/vi/z1FRzJSREb4/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ckT3SNVenuFD-H_gGACvumuxRgY" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist6">
Mario Kart Wii Music<br>
<img src = "https://i.ytimg.com/vi/NoyHiTp4qyc/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=0x99nrbswzRSsBt3sm91dvXwWKw" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist7">
Boom Beach<br>
<img src = "https://i.ytimg.com/vi/8a3M97olSZ8/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=36S0Fax5iggJUsTen5Ca64Lzago" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist8">
Playing Instruments<br>
<img src = "https://i.ytimg.com/vi/_Z-usnvpr5Y/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ZlsOY5CyHfOExuly9G_gT_mSrEc" class = "playlist_img">
</span><br>
<span class = "pointer_cursor playlist_link" id = "playlist9">
Blue Shell Dodges<br>
<img src = "https://i.ytimg.com/vi/iqR2ZsUYepY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=4LYLGke9o_DZ3Rfr8EPcIy_Xjwc" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist10">
Star Warfare<br>
<img src = "https://i.ytimg.com/vi/uKXm-9qzn1s/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=yBStUpT8xpNyHbTirSz1h1bLgF0" class = "playlist_img">
</span>
</figure>
</section>
<div class = "bg_fader"> </div>
</body>
</HTML>
答案 0 :(得分：0)
您应该在嵌入内容后调用中心方法
$("#playlist1").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/1oyqANxWF00?list=PL1L8ZIWcaEsJpzvQgmZwrPJgoyCHTorz8&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Mario Kart Wii let's play playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
$("#current_playlist").center();
});
答案 1 :(得分：0)
尝试给#current_playlist宽度。现在，它从内部的iframe获取它的尺寸，但是当jQuery中心插件执行它的计算时，它使用了div的初始尺寸。
#current_playlist {
background-color: white;
border: 2px solid lightgrey;
border-radius: 5px;
box-shadow: black 0px 2px 7px;
width: 585px; //set this
}
答案 2 :(得分：0)
有很多方法可以做到这一点。
最简单的方法是将此CSS添加到“current_playlist”并删除您正在实现内联的css。这应该有用。
position: fixed;
width: 585px;
right: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0px auto;
答案 3 :(得分：0)
您可以只使用CSS来固定具有固定尺寸的div：
#current_playlist {
background-color: white;
border: 2px solid lightgrey;
border-radius: 5px;
box-shadow: black 0px 2px 7px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -225px;
margin-left: -267px;
}
$(document).ready(function() {
var top = Math.max($(window).height() / 2 - this.offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - this.offsetWidth / 2, 0);
$(".bg_fader").click(function() {
$(".bg_fader").css("display", "none");
$("#current_playlist").remove();
$("iframe").remove();
enableScroll();
$("body").css("overflow-y", "scroll");
});
var playlist_note = "<p><b>NOTE:</b> Click navigation button on top left corner to view other episodes in playlist.</p>";
$("#playlist1").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/1oyqANxWF00?list=PL1L8ZIWcaEsJpzvQgmZwrPJgoyCHTorz8&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Mario Kart Wii let's play playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist2").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsKdkpuaxAgUl1_SjJ73R4Zy&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my let's play for Custom Track Grand Prix (CTGP) a hack for Mario Kart Wii.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist3").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsIB__j4jeRx8f9YBswNYWLc&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my playlist for the time trials mode in Mario Kart Wii.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist4").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsLFTcJIUH-3eaMgvjDtrotR&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is the New Super Mario Bros Wii playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist5").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsI0YyycljxC7QitO-cPiOXl&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is the Super Smash Bros Brawl Project M Free-For-All (F4A) playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist6").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsLWe_L32jDRU9eaa5equmeg&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> Music from Mario Kart Wii that is 30 minutes long.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist7").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsK8lu8V0_bf-P_r4THCWzsG&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Boom Beach playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist8").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsJUtU7E7FYpgnJsBGscMb0V&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my musical instruments playlist where I play Nintendo music.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist9").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsIDU1d1IV2xnxTnB04xDGHq&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my blue-shell dodges playlist.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
$("#playlist10").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");
$("#current_playlist").center();
$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsKheiHBR3SxeyEi4SaDsF_A&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my playlist for Star Warfare 1 and 2 gameplay.</p>"
+ playlist_note
);
$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});
});.pause_bttn {
display: none;
}
.bttn {
color: #00ACED;
cursor: pointer;
}
.contact_me_wrapper {
margin: 50px auto;
width: 45%;
background-color: white;
box-shadow: black 0px 2px 7px;
padding: 15px 10px;
}
legend {
font-size: 30px;
font-family: Digital;
background-color: white;
border-top: 2px solid lightgrey;
border-right: 2px solid lightgrey;
border-left: 2px solid lightgrey;
border-radius: 3px;
}
.bg_fader {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 200%;
opacity: 0.7;
display: none;
}
.playlist_link {
margin: 0px 15px;
float: left;
}
#current_playlist {
background-color: white;
border: 2px solid lightgrey;
border-radius: 5px;
box-shadow: black 0px 2px 7px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -225px;
margin-left: -267px;
}
#current_playlist > iframe {
margin: 10px;
border: 2px solid black;
border-radius: 3px;
}
#current_playlist > p {
padding: 5px 10px;
width: 550px;
}<!DOCTYPE HTML>
<HTML lang = "EN-US">
<head>
<meta charset = "UTF-8">
<meta name = "title" content = "MiiLikesYoshi">
<meta name = "description" content = "This is the official website for MiiLikesYoshi on YouTube.">
<meta name = "author" content = "Adam S. Oates">
<title> Playlists </title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" href = "main.css">
<script type = "text/javascript" language = "javascript" src = "http://code.jquery.com/jquery-3.1.0.js"></script>
<script type = "text/javascript" language = "javascript" src = "http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.1.js"></script>
<script type = "text/javascript" language = "javascript" src = "main.js"></script>
<script type = "text/javascript" language = "javascript" src = "playlists.js"></script>
<audio id = "fancyMusic" loop>
<source src = "audio/music.mp3" type = "audio/mp3">
</audio>
</head>
<body>
<header>
<div class = "facebook_icon icon">
<a href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjR1PDI9Y7PAhUg0IMKHfDjBVkQFggeMAE&url=https%3A%2F%2Fwww.facebook.com%2FMiiLikesYoshi%2F&usg=AFQjCNELIMTOxlZJ6Tztl1xLMJF79DKqQg&sig2=VD_lUAGE_CgypA7OW2Y49Q&bvm=bv.132479545,d.amc">f</a>
</div>
<div class = "google_plus_icon icon">
<a href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&sqi=2&ved=0ahUKEwja3Z-Q9o7PAhWU8oMKHTYlC1YQFgg-MAY&url=https%3A%2F%2Fplus.google.com%2F%2BGigaboyWebDesigns&usg=AFQjCNHKXSjVOBodSa8OuVj8s950ke0OWw&sig2=KH2I_ahP5bLWwNT7BxG5Mg&bvm=bv.132479545,d.amc">G+</a>
</div>
<!-- Remove "style = 'desplay:none;'" when you get twitter for GWD. -->
<div class = "twitter_icon icon" style = "display:none;">
<a href = "http://www.twitter.com/"><img src = "images/bird.png" class = "twitter_img"></a>
</div>
<div class = "upcoming_events">
<span class = "upcoming_title_wrapper">Upcoming Livestreams: </span>
<span class = "time_wrapper">
<span id = "days_countdown">00</span> Days
<span id = "hours_countdown">00</span> Hours
<span id = "minutes_countdown">00</span> Minutes
<span id = "seconds_countdown">00</span> Seconds
</span><br>
<span class = "event_wrapper">No upcoming livestreams.</span>
</div>
</header>
<div class = "logo_wrapper">
<span class = "logo_text">Mii Likes<br> Yoshi</span>
</div>
<div class = "links_wrapper">
<a href = "index.html">Home</a> |
<a href = "videos.php">Videos</a> |
<a href = "playlists.php" class = "current_link">Playlists</a> |
<a href = "contact-me.php">Contact Me</a>
</div>
<section class = "main_section_wrapper">
<figure>
<span class = "pointer_cursor playlist_link" id = "playlist1">
Mario Kart Wii Let's Play || #1<br>
<img src = "https://i.ytimg.com/vi/F4j2RovjbVE/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=3WpUrFrz70HB3qrKeL4-k9GHExk" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist2">
Custom Track Grand Prixs || #2<br>
<img src = "https://i.ytimg.com/vi/8VhN6PuKJQQ/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=qfCgzBads5L8HEjnMvcG5meB2Yo" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist3">
Mario Kart Wii Time Trials || #3<br>
<img src = "https://i.ytimg.com/vi/BPU_JjC0sRs/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=bGEUMrcSPUiXAOPXjq3RHYJYcPU" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist4">
New Super Mario Bros Wii 2-Player || #4<br>
<img src = "https://i.ytimg.com/vi/cvdToX0qpJA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Q_9f0HZBMdr1cuXFRbOluDgcLtY" class = "playlist_img">
</span><br>
<span class = "pointer_cursor playlist_link" id = "playlist5">
Super Smash Bros Project M F4A<br>
<img src = "https://i.ytimg.com/vi/z1FRzJSREb4/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ckT3SNVenuFD-H_gGACvumuxRgY" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist6">
Mario Kart Wii Music<br>
<img src = "https://i.ytimg.com/vi/NoyHiTp4qyc/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=0x99nrbswzRSsBt3sm91dvXwWKw" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist7">
Boom Beach<br>
<img src = "https://i.ytimg.com/vi/8a3M97olSZ8/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=36S0Fax5iggJUsTen5Ca64Lzago" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist8">
Playing Instruments<br>
<img src = "https://i.ytimg.com/vi/_Z-usnvpr5Y/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ZlsOY5CyHfOExuly9G_gT_mSrEc" class = "playlist_img">
</span><br>
<span class = "pointer_cursor playlist_link" id = "playlist9">
Blue Shell Dodges<br>
<img src = "https://i.ytimg.com/vi/iqR2ZsUYepY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=4LYLGke9o_DZ3Rfr8EPcIy_Xjwc" class = "playlist_img">
</span>
<span class = "pointer_cursor playlist_link" id = "playlist10">
Star Warfare<br>
<img src = "https://i.ytimg.com/vi/uKXm-9qzn1s/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=yBStUpT8xpNyHbTirSz1h1bLgF0" class = "playlist_img">
</span>
</figure>
</section>
<div class = "bg_fader"> </div>
</body>
</HTML>