简体   繁体   中英

unable to align HTML and SVG elements using CSS

I have the following HTML and SVG elements. I have changed around a few positions and added some padding-left in my CSS, however, I'm unable to align these next to each other.

This is the code and output on jsbin

This is the output I currently get 在此处输入图片说明

However, I would like the elements to be aligned next to each other at the center of the page, as follows 在此处输入图片说明

This is my code

HTML file

<!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>

home.css referenced by above HTML file

#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;
}

tennis.css referenced by above HTML file

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;
}

Use div 's to contain the blocks you want to align horizontally and set them to float: left;

css:

#court div {
  float: left;
}

html:

<div id="court" class="row">
    <div>
      <p>Upload a csv file</p><br>
        <input type="file" id="myFile">
    </div>
    <div>
      <p>Select player from list</p><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>
    </div>
    <div>
      <p>Select type of serve</p><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>
      </div>
      <div>
        <svg id="tennis-court">

            <svg onclick="recordClick(1)">
                <rect x="20" y="35" width="30" height="30"></rect>
                <text x="21" y="50" fill="red">Deuce</text>
            </svg>

            <svg onclick="recordClick(2)">
                <rect x="50" y="35" width="30" height="30"></rect>
                <text x="60" y="50" fill="red">Ad</text>
            </svg>

            <path d="M10 10 L10 120 L20 120 L20 10 Z"></path>
            <path d="M10 10 L90 10 Z"></path>
            <path d="M90 10 L90 120 L80 120 L80 10 Z"></path>
            <path d="M90 120 L10 120 Z"></path>
            <path d="M10 65 L90 65 Z"></path>
            <path d="M10 35 L90 35 Z"></path>
            <path d="M10 95 L90 95 Z"></path>
            <path d="M50 35 L50 95 Z"></path>

            <path d="M50 10 L50 15 Z"></path>
            <path d="M50 120 L50 115 Z"></path>

            <svg onclick="recordClick(1)">
                <rect x="120" y="35" width="10" height="30"></rect>
                <text x="120" y="50" fill="red">W</text>
                <rect x="130" y="35" width="15" height="30"></rect>
                <text x="134" y="50" fill="red">B</text>
                <rect x="145" y="35" width="5" height="30"></rect>
                <text x="144" y="50" fill="red">T</text>
            </svg>

            <svg onclick="recordClick(2)">
                <rect x="150" y="35" width="15" height="30"></rect>
                <text x="150" y="50" fill="red">T</text>
                <rect x="155" y="35" width="15" height="30"></rect>
                <text x="158" y="50" fill="red">B</text>
                <rect x="170" y="35" width="10" height="30"></rect>
                <text x="169" y="50" fill="red">W</text>
            </svg>

            <path d="M110 10 L110 120 L120 120 L120 10 Z"></path>
            <path d="M110 10 L190 10 Z"></path>
            <path d="M190 10 L190 120 L180 120 L180 10 Z"></path>
            <path d="M190 120 L110 120 Z"></path>
            <path d="M110 65 L190 65 Z"></path>
            <path d="M110 35 L190 35 Z"></path>
            <path d="M110 95 L190 95 Z"></path>
            <path d="M150 35 L150 95 Z"></path>

            <path d="M150 10 L150 15 Z"></path>
            <path d="M150 120 L150 115 Z"></path>

            <svg onclick="recordClick(1)">
                <rect x="220" y="35" width="10" height="30"></rect>
                <text x="220" y="50" fill="red">W</text>
                <rect x="230" y="35" width="15" height="30"></rect>
                <text x="234" y="50" fill="red">B</text>
                <rect x="245" y="35" width="5" height="30"></rect>
                <text x="244" y="50" fill="red">T</text>
            </svg>

            <svg onclick="recordClick(2)">
                <rect x="250" y="35" width="15" height="30"></rect>
                <text x="250" y="50" fill="red">T</text>
                <rect x="255" y="35" width="15" height="30"></rect>
                <text x="258" y="50" fill="red">B</text>
                <rect x="270" y="35" width="10" height="30"></rect>
                <text x="269" y="50" fill="red">W</text>
            </svg>

            <path d="M210 10 L210 120 L220 120 L220 10 Z"></path>
            <path d="M210 10 L290 10 Z"></path>
            <path d="M290 10 L290 120 L280 120 L280 10 Z"></path>
            <path d="M290 120 L210 120 Z"></path>
            <path d="M210 65 L290 65 Z"></path>
            <path d="M210 35 L290 35 Z"></path>
            <path d="M210 95 L290 95 Z"></path>
            <path d="M250 35 L250 95 Z"></path>

            <path d="M250 10 L250 15 Z"></path>
            <path d="M250 120 L250 115 Z"></path>
        </svg>
      </div>
      <div>
        <button id="visualizeBtn" onclick="myFunction()">Visualize serve</button>
    </div>
</div>

http://jsbin.com/sizahedehe/1/edit?html,css,output

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM