How would I center the text in the middle on here using only html?

Using display:table-cell; vertical-align:middle; doesn’t work.

And I know the video doesn’t play, I didn’t put one in.

<div style="width:266px;display:block;" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

<div style="width: 266px; height: 150px; display:table-cell; vertical-align:middle;cursor: pointer;background-color: blue;font-family:Tahoma; font-weight: bold;font-size:30px;  color:#00aeef;">Play</div></div>

<div id="thevideo" style="display: none;">
<iframe id="iframe" width="256" height="256" src="https://www.youtube.com/embed/?rel=0&disablekb=1&amp;vq=medium&amp;showinfo=0&controls=0&amp;autoplay=0&iv_load_policy=3&fs=0&amp;wmode=transparent" style="width: 266px; height: 150px; background-color:#000000; cursor: pointer; border:0;"></iframe>

display:table / table-cell certainly DO work.

Try this.

https://jsfiddle.net/yj6ro2fg/4/

I don’t speak JS, so that is just a guess that seems to work. You’ll probably have to change it to make it correct.

Someone will have to show me how to make it correct.

1 Like

Me, too. :lol:

1 Like

First of all, you’ll need to clarify the question you’re asking.

You have asked

How would I center the text in the middle on here using only html?

but then you go on to say

HTML refers to the elements which give structure and semantic meaning to the page. e.g. <p>, <h1>, <a>, <img>, <div> etc.

Additional information which you can include within the tag are attributes. e.g. <img class="big-picture" source="images/mypicture" width="800" height="600"> The class, source, width and height are all attributes.

display:table-cell; vertical-align:middle is not HTML; it is styling information.

Are you asking how to vertically-centre the text using in-line styles? If so, then you will need to explain in what way the code @ronpat gave you in post #2 fails to meet your requirements, and what help you require in amending it.

2 Likes

vertically-centre the text in the middle, yes.

Why does it fail to meed my requirements? It works though?

You posted that after @ronpat gave you the code which does what you want, so the obvious conclusion for us to draw is that there is still a problem.

Something like this?

jsfiddle.net

Can I move this to html?

#play {
  display: block;
  width: 100%;
  max-width: 266px;
  height: 150px;
  background-color: blue;
  font-family: Tahoma, serif;
  font-weight: bold;
  font-size: 1.875rem;
  line-height: 150px;
  color: #00aeef;
  text-align: center;
}

You mean can you write it as inline styles? Did you try, and if so, what was the result?

I removed this line of code from Play style: width: 100%; max-width: 266px; height: 150px;

And it works, does it mean I can do without it, or do I still need it included in the code?

<div style="width:266px;display:block;" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

<div style="display: block; cursor: pointer;background-color: blue; font-family: Tahoma, serif; font-weight: bold; font-size: 1.875rem; line-height: 150px; color: #00aeef; text-align: center;">Play</div></div>


<div id="thevideo" style="display: none;">
<iframe id="iframe" width="256" height="256" src="https://www.youtube.com/embed/?rel=0&disablekb=1&amp;vq=medium&amp;showinfo=0&controls=0&amp;autoplay=0&iv_load_policy=3&fs=0&amp;wmode=transparent" style="width: 266px; height: 150px; background-color:#000000; cursor: pointer; border:0;"></iframe>

Can respond/comment to above @ronpat

It looks like those properties and values make the Play box shrinkable in narrow widths. I would leave them in if it were me.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.