0
次のHTML要素とSVG要素があります。私はいくつかのポジションを変更し、CSSでいくつかのパディングを追加しましたが、私はこれらを互いに並べることができません。CSSを使用してHTMLおよびSVG要素を揃えることができません
これは、これはしかし、私は要素がページの中央で隣同士に整列されたい私は現在 
を得る出力されjsbin
上のコードと出力されます 
を次のようにこれは私のコード
HTMLファイル
です<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tennis</title>
<link rel="stylesheet" type="text/css" href="css/tennis.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link rel="next" href="usopenseries.html">-->
<!--<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />-->
</head>
<body>
<div id="title" class="row">
<!--<div id="prev">-->
<!--</div>-->
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<div id="tennis">Serve direction</div>
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<!--<div id="next">-->
<!--</div>-->
</div>
<div id="court" class="row">
<!--<label class="control-label">Select File</label>-->
<!--<input id="input-1" type="file" class="file">-->
<p>Upload a csv file<br>
<input type="file" id="myFile"/>
<p>Select player from list<br>
<select id="playerselect" name="playerselect">
<option selected="true" style="display:none;">Select player</option>
<option value="safin">Marat Safin</option>
<option value="stepanek">Radek Stepanek</option>
</select>
<p>Select type of serve<br>
<select id="serveselect" name="serveselect">
<option selected="true" style="display:none;">Select serve</option>
<option value="firstserve">First Serve</option>
<option value="secondserve">Second Serve</option>
</select>
<svg id="tennis-court" >
<svg onclick="recordClick(1)">
<rect x="20" y="35" width="30" height="30" />
<text x="21" y="50" fill="red">Deuce</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="50" y="35" width="30" height="30" />
<text x="60" y="50" fill="red">Ad</text>
</svg>
<path d="M10 10 L10 120 L20 120 L20 10 Z" />
<path d="M10 10 L90 10 Z" />
<path d="M90 10 L90 120 L80 120 L80 10 Z" />
<path d="M90 120 L10 120 Z" />
<path d="M10 65 L90 65 Z" />
<path d="M10 35 L90 35 Z" />
<path d="M10 95 L90 95 Z" />
<path d="M50 35 L50 95 Z" />
<path d="M50 10 L50 15 Z" />
<path d="M50 120 L50 115 Z" />
<!--<a xlink:href="wtah2h.html"><rect x="47" y="4" width="39" height="4.5" /><path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" /><text x="47.5" y="8">WTA H2H</text></a>-->
<!--<a xlink:href="atph2h.html"><rect x="8" y="8.5" width="18" height="27" /><path d="M8 8.5 L26 8.5 L26 35.5 L8 35.5 Z" /><text x="8.5" y="35">ATP H2H</text></a>-->
<!--<path d="M26 8.5 L47 8.5 L47 22 L26 22 Z" />-->
<!--<path d="M26 22 L47 22 L47 35.5 L26 35.5 Z" />-->
<!--<path d="M8 35.5 L47 35.5 L47 40 L8 40 Z" />-->
<!--<path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" />-->
<!--<path d="M47 8.5 L68 8.5 L68 22 L47 22 Z" />-->
<!--<path d="M47 22 L68 22 L68 35.5 L47 35.5 Z" />-->
<!--<path d="M68 8.5 L86 8.5 L86 35.5 L68 35.5 Z" />-->
<!--<path d="M47 35.5 L86 35.5 L86 40 L47 40 Z" />-->
<!--<path d="M8 22 L9 22 Z" />-->
<!--<path d="M86 22 L85 22 Z" />-->
<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
<svg onclick="recordClick(1)">
<rect x="120" y="35" width="10" height="30" />
<text x="120" y="50" fill="red">W</text>
<rect x="130" y="35" width="15" height="30" />
<text x="134" y="50" fill="red">B</text>
<rect x="145" y="35" width="5" height="30" />
<text x="144" y="50" fill="red">T</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="150" y="35" width="15" height="30" />
<text x="150" y="50" fill="red">T</text>
<rect x="155" y="35" width="15" height="30" />
<text x="158" y="50" fill="red">B</text>
<rect x="170" y="35" width="10" height="30" />
<text x="169" y="50" fill="red">W</text>
</svg>
<path d="M110 10 L110 120 L120 120 L120 10 Z" />
<path d="M110 10 L190 10 Z" />
<path d="M190 10 L190 120 L180 120 L180 10 Z" />
<path d="M190 120 L110 120 Z" />
<path d="M110 65 L190 65 Z" />
<path d="M110 35 L190 35 Z" />
<path d="M110 95 L190 95 Z" />
<path d="M150 35 L150 95 Z" />
<path d="M150 10 L150 15 Z" />
<path d="M150 120 L150 115 Z" />
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices-->
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices-->
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices -->
<svg onclick="recordClick(1)">
<rect x="220" y="35" width="10" height="30" />
<text x="220" y="50" fill="red">W</text>
<rect x="230" y="35" width="15" height="30" />
<text x="234" y="50" fill="red">B</text>
<rect x="245" y="35" width="5" height="30" />
<text x="244" y="50" fill="red">T</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="250" y="35" width="15" height="30" />
<text x="250" y="50" fill="red">T</text>
<rect x="255" y="35" width="15" height="30" />
<text x="258" y="50" fill="red">B</text>
<rect x="270" y="35" width="10" height="30" />
<text x="269" y="50" fill="red">W</text>
</svg>
<path d="M210 10 L210 120 L220 120 L220 10 Z" />
<path d="M210 10 L290 10 Z" />
<path d="M290 10 L290 120 L280 120 L280 10 Z" />
<path d="M290 120 L210 120 Z" />
<path d="M210 65 L290 65 Z" />
<path d="M210 35 L290 35 Z" />
<path d="M210 95 L290 95 Z" />
<path d="M250 35 L250 95 Z" />
<path d="M250 10 L250 15 Z" />
<path d="M250 120 L250 115 Z" />
<!--<a xlink:href="wtah2h.html"><rect x="47" y="4" width="39" height="4.5" /><path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" /><text x="47.5" y="8">WTA H2H</text></a>-->
<!--<a xlink:href="atph2h.html"><rect x="8" y="8.5" width="18" height="27" /><path d="M8 8.5 L26 8.5 L26 35.5 L8 35.5 Z" /><text x="8.5" y="35">ATP H2H</text></a>-->
<!--<path d="M26 8.5 L47 8.5 L47 22 L26 22 Z" />-->
<!--<path d="M26 22 L47 22 L47 35.5 L26 35.5 Z" />-->
<!--<path d="M8 35.5 L47 35.5 L47 40 L8 40 Z" />-->
<!--<path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" />-->
<!--<path d="M47 8.5 L68 8.5 L68 22 L47 22 Z" />-->
<!--<path d="M47 22 L68 22 L68 35.5 L47 35.5 Z" />-->
<!--<path d="M68 8.5 L86 8.5 L86 35.5 L68 35.5 Z" />-->
<!--<path d="M47 35.5 L86 35.5 L86 40 L47 40 Z" />-->
<!--<path d="M8 22 L9 22 Z" />-->
<!--<path d="M86 22 L85 22 Z" />-->
</svg>
<button id = "visualizeBtn" onclick="myFunction()">Visualize serve</button>
</div>
<!--<div id="bottom" class="row">-->
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<!--<div class="tennis"></div>-->
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<!--</div>-->
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>-->
<!--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<!--<script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>-->
<!--<script type="text/javascript" src="js/tennis.js"></script>-->
<script>
// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
// })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
//
// ga('create', 'UA-23542009-21', 'auto');
// ga('send', 'pageview');
function recordClick(i)
{
if(i==1)
alert("clicked Deuce court...");
else if(i==2)
alert("clicked Ad court...");
}
function myFunction()
{
alert("clicked on the visualize button!");
}
</script>
</body>
</html>
上記のHTMLファイルが参照するhome.css
#court {
/*padding-left: 10cm;*/
height: 80%;
max-height: 80%;
max-width: 80%;
overflow: hidden;
}
#tennis-court {
height: 25%;
width: 27.5%;
background-color: #0A5C2F;
}
#tennis-court path {
stroke: #ffffff;
stroke-width: 1.5px;
fill:none;
}
#tennis-court text {
text-anchor: start;
font-size: 0.95rem;
text-decoration: none;
stroke: #ffffff;
stroke-width: 0.1px;
fill: #ffffff;
}
#tennis-court rect {
fill: #0A5C2F;
stroke-width: 0.1px;
}
#tennis-court rect:hover {
fill: #ccff00;
}
#myFile
{
/*padding-left: 1cm;*/
/*padding-top: 10cm;*/
padding-left: 2cm;
}
#visualizeBtn
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
上記のHTMLファイルが参照するtennis.css
html, body {
height: 100%;
width: 100%;
}
a, a:visited, a:focus, a:hover {
color: #0A5C2F !important;
text-decoration: none !important;
}
svg a, svg a:visited, svg a:focus, svg a:hover {
color: #0A5C2F;
text-decoration: none;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.button {
font-size: 1.4rem;
line-height: 2rem;
}
.button:hover, .button.active:hover {
opacity: 0.5;
cursor: pointer;
}
/* top bar */
#title, #bottom {
height: 10%;
text-align: center;
display: table;
table-layout: fixed;
margin: 0;
width: 100%;
}
#title a:hover {
opacity: 0.5;
}
.ball {
width: 5%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
.ball-svg {
float: right;
max-height: 50px;
}
.ball-svg circle {
fill: #ccff00;
}
#tennis {
display: table-cell;
vertical-align: middle;
width: 30%;
font-size: 3rem;
color: #0A5C2F;
}
#prev, #next {
display: table-cell;
vertical-align: middle;
width: 30%;
font-size: 1.5rem;
color: #0A5C2F;
}
/* main */
#main {
height: 90%;
max-height: 90%;
max-width: 100%;
overflow: hidden;
}
#main text {
font-size: 1rem;
text-anchor: middle;
}wwq
#main circle:hover {
cursor: pointer;
}
/* options */
#options {
height: 10%;
text-align: center;
display: table;
table-layout: fixed;
margin: 0;
width: 100%;
}
#options-1-table, #options-2-table {
display: table;
height: 100%;
width: 100%;
}
#options-1, #options-2 {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 35%;
}
/* chart */
#chart-row {
height: 90%;
}
#chart {
height: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
#chart-title {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 30%;
font-size: 1.4rem;
background-color: #0A5C2F;
color: #ffffff;
}
後半応答のため申し訳ありません。よく働く。 – PepperBoy