1

So I have made something that looks like this but I want it to look like this. I have used a div around the text but this moves it to a next line. I have also tried margin-top: -10px; or top: -10px; but to no use. line-height:0px; does not work too. Here is the code: 

var wood = 15;
document.getElementById("wood").innerHTML = wood;
#resources {
    white-space: nowrap;
    font-weight: bold;
    position: absolute;
    margin-top: 825px;
    margin-left: 25px;
}

#nadpisResources {
    position: absolute;
    font-size: 45px;
}

#resourcesHodnoty {
    position: absolute;
    margin-left: 50px;
    margin-top: 50px;
    font-size: 35px;
    font-weight: bold;
    
}
    <div id="resources">
        <div id="nadpisResources">Resources:</div>
        <div id="resourcesHodnoty">
        <img src="ikonyNavic/wood.png" width="50px;" height="50px;">
        <div style="display: inline-block; margin-top:-30px"> Wood: <element id="wood"></element></div>

    </div>
    </div>
Sves100
  • 47
  • 1
  • 7
  • 1
    add `vertical-align: top;` to bottom image and div – Madhawa Priyashantha Feb 23 '19 at 13:21
  • I don´t have the second image. That was photoshop... I have the first one and making the div around the text with vertical-align: top; does not work – Sves100 Feb 23 '19 at 13:27
  • do you want something like this ? https://jsfiddle.net/6oLygznf/ or center https://jsfiddle.net/qwxtdea1/ – Madhawa Priyashantha Feb 23 '19 at 13:37
  • Possible duplicate of [How to horizontally center a
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div)
     – t.m. Feb 23 '19 at 13:38
  • @MadhawaPriyashantha this works and after I tried setting the first comment you wrote a little bit better it worked too! Thanks for that. Not duplicate as my problem is not with a div but with a picture. and it behaves a bit differently – Sves100 Feb 23 '19 at 14:06

0 Answers0