时间戳

首页 > 解决方案 > 有没有办法将按钮链接到链接并将其文本居中？

javascript - 有没有办法将按钮链接到链接并将其文本居中？

问题描述

有没有办法将按钮链接到另一个网站？（例如 youtube）因为它不适用于href="{link}"

<button href="www.youtube.com">GoTo Lessons</button>
<style>
a {
  border: 2px solid;
  color: black;
  border-radius: 15px;
}
</style>

<div class="code-area">
  <textarea id="htmlCode" class="1111" placeholder="HTML" 
            oninput="showPreview()"></textarea>
  <textarea id="cssCode" class="2222" placeholder="CSS" 
            oninput="showPreview()"></textarea>
  <textarea id="jsCode" class="333" placeholder="JavaScript" 
            oninput="showPreview()"></textarea>             
</div>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

<style>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
}
.code-area {
  display: flex;
  flex-direction:column;
  width: 50%;
  border-right:1px solid #555;
}
.code-area textarea {
  border: 2px solid;
  border-radius: 15px;
  resize: none;
  outline: none;
  width: 100%;
  height: 33.33%;
  font-size: 18px;
  padding: 10px;
}
.preview-area {
  border: 2px solid;
  border-radius: 15px;
  width: 50%;
}
.preview-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<script>
function showPreview(){
  var htmlCode = document.getElementById("htmlCode").value;
  var cssCode = "<style>"+document.getElementById("cssCode").value+"</style>";
  var jsCode = "<scri"+"pt>"+document.getElementById("jsCode").value+"</scri"+"pt>";
  var frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(htmlCode+cssCode+jsCode);
  frame.close();
}
</script>

不要注意这个随机文本，我只是输入了它，否则它不会让我 ost 因为我有太多的代码而没有足够的文本所以如果这很无聊你不会被迫阅读这个我想是的所以如果你愿意，你可以去，所以不要读这个，所以是的，再见

标签： javascripthtmlcss

解决方案

您可以使用CSS 弹性框：

  display: flex;
  justify-content: center; /* for text "text-align: center;" will work too */
  align-items: center;


function showPreview(){
  var htmlCode = document.getElementById("htmlCode").value;
  var cssCode = "<style>"+document.getElementById("cssCode").value+"</style>";
  var jsCode = "<scri"+"pt>"+document.getElementById("jsCode").value+"</scri"+"pt>";
  var frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(htmlCode+cssCode+jsCode);
  frame.close();
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
}
.code-area {
  display: flex;
  flex-direction:column;
  width: 50%;
  border-right:1px solid #555;
}
.code-area textarea {
  border: 2px solid;
  border-radius: 15px;
  resize: none;
  outline: none;
  width: 100%;
  height: 33.33%;
  font-size: 18px;
  padding: 10px;
}
.preview-area {
  border: 2px solid;
  border-radius: 15px;
  width: 50%;
}
.preview-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

a {
  border: 2px solid;
  color: black;
  border-radius: 15px;
  
  /* Added */
  display: flex;
  text-align: center;
  align-items: center;
}
div {
  text-align: center;
  vertical-align: middle;
}
<a href="www.youtube.com">GoTo Lessons</a>

<div class="code-area">
  <textarea id="htmlCode" class="1111" placeholder="HTML" 
            oninput="showPreview()"></textarea>
  <textarea id="cssCode" class="2222" placeholder="CSS" 
            oninput="showPreview()"></textarea>
  <textarea id="jsCode" class="333" placeholder="JavaScript" 
            oninput="showPreview()"></textarea>             
</div>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

推荐阅读