Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Align vertically inside a cell

K

Kalabagh7

Coder
Hey there,

I'm new to CSS and HTML, so here's my doubt. I have made a table and in some cell I want to have a title on the left and anoter title WITH OTHER STYLING on the right. I have tried to include "vertical-align: bottom" in the HTML code but nothing. I also have created a new PAGE ID line in the general style.css but nothing.

So please, I would like to have a little bit of guideness to overpass this so easy issue.

Thanks in advance.
 
Sort by date Sort by votes
Hello!

Do you have a seperate cell for your title? Try using text-align property. If not you could probably use margin.

Would be better if you shared your code as well.
 
Upvote 0 Downvote
Hello Master,

Please, find attached my code. Take care, the table is large.

The two titles I want in the same cell and aligned vertically, and with different styling are "FULLFLOATER-S" and "Flujo axial turbulento"

Here's the code:

[CODE lang="html" highlight="13-14"]<table id="Tabla de impulsores" style="border: none;">
<tbody>
<tr>
<td style="border: none;">
<h1><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/FULLFLOATER-S-1-e1587405204908.jpg"></h1>
</td>
<td style="border: none;">
<h1><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/FULLFLOATER-EVO1-1-e1587405192329.jpg"></h1>
</td>
</tr>
<tr>
<td style="border: none;">
<h3 style="float: left;">FULLFLOATER-S</h3>
<h6 style="float: left;">Flujo axial turbulento</h6>
</td>
<td style="border: none;">
<h3>FULLFLOATER-EVO1</h3>
</td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Agitaciones de tamaño medio a grande.</li>
<li>El diseño bipala facilita su montaje por la boca de hombre.</li>
<li>Relación caudal/potencia mejorada.</li>
<li>Funcionamiento optimizado con cortacorrientes.</li>
</ul>
</td>
<td style="border: none;">
<ul>
<li>Flujo axial homogéneo.</li>
<li>El diseño bipala facilita su montaje por la boca de hombre.</li>
<li>Puede operar sin cortacorrientes.</li>
</ul>
</td>
</tr>
<tr>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/FULLVISC-e1587406928679.png"></td>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/NCORA-e1587407097580.jpg"></td>
</tr>
<tr>
<td style="border: none;">
<h3>FULLVISC</h3>
</td>
<td style="border: none;">
<h3>ÁNCORA</h3>
</td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Procesos de transmisión de calor y/o participación en homogeneizaciones.</li>
<li>Generación de flujo circulante por desplazamiento del fluido.</li>
<li>Dimensiones y relación de aspecto adaptables.</li>
<li>Puede incluir rascadores de pared.</li>
</ul>
</td>
<td style="border: none;">
<ul>
<li>Mezcla de productos viscosos con intercambio térmico en las paredes del depósito.</li>
<li>Puede incluir rascadores de pared.</li>
</ul>
</td>
</tr>
<tr>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/COWLES-e1587407218744.jpg"></td>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/VORTEX-e1587407194504.jpg"></td>
</tr>
<tr>
<td style="border: none;">
<h3>COWLES</h3>
</td>
<td style="border: none;">
<h3>VORTEX</h3>
</td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Procesos de dispersión y homogeneización sólido-líquido.</li>
</ul>
</td>
<td style="border: none;">
<ul>
<li>Mezcla sólido-líquido en fase viscosa.</li>
<li>Bajo peso que permite un rango elevado de velocidad.</li>
</ul>
</td>
</tr>
<tr>
<td style="border: none;">
<h3><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/HELICE-F-e1587407206355.jpg"></h3>
</td>
<td style="border: none;">
<h3></h3>
</td>
</tr>
<tr>
<td style="border: none;">
<h3>HÉLICE-F</h3>
</td>
<td style="border: none;"></td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Adaptación geométrica al fondo del tanque.</li>
<li>Para montar juntamente con las turbinas FULLFLOATER.</li>
<li>Mejora la suspensión de partículas, direcciona el flujo en el fondo y optimiza los procesos de descarga.</li>
</ul>
</td>
<td style="border: none;"></td>
</tr>
</tbody>
</table>[/CODE]

I would prefer to do it in the page html file rather than in the style.css general file, if it's possible.
 
Upvote 0 Downvote
Kalabagh7 said:
Hello Master,

Please, find attached my code. Take care, the table is large.

The two titles I want in the same cell and aligned vertically, and with different styling are "FULLFLOATER-S" and "Flujo axial turbulento"

Here's the code:

[CODE lang="html" highlight="13-14"]<table id="Tabla de impulsores" style="border: none;">
<tbody>
<tr>
<td style="border: none;">
<h1><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/FULLFLOATER-S-1-e1587405204908.jpg"></h1>
</td>
<td style="border: none;">
<h1><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/FULLFLOATER-EVO1-1-e1587405192329.jpg"></h1>
</td>
</tr>
<tr>
<td style="border: none;">
<h3 style="float: left;">FULLFLOATER-S</h3>
<h6 style="float: left;">Flujo axial turbulento</h6>
</td>
<td style="border: none;">
<h3>FULLFLOATER-EVO1</h3>
</td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Agitaciones de tamaño medio a grande.</li>
<li>El diseño bipala facilita su montaje por la boca de hombre.</li>
<li>Relación caudal/potencia mejorada.</li>
<li>Funcionamiento optimizado con cortacorrientes.</li>
</ul>
</td>
<td style="border: none;">
<ul>
<li>Flujo axial homogéneo.</li>
<li>El diseño bipala facilita su montaje por la boca de hombre.</li>
<li>Puede operar sin cortacorrientes.</li>
</ul>
</td>
</tr>
<tr>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/FULLVISC-e1587406928679.png"></td>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/NCORA-e1587407097580.jpg"></td>
</tr>
<tr>
<td style="border: none;">
<h3>FULLVISC</h3>
</td>
<td style="border: none;">
<h3>ÁNCORA</h3>
</td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Procesos de transmisión de calor y/o participación en homogeneizaciones.</li>
<li>Generación de flujo circulante por desplazamiento del fluido.</li>
<li>Dimensiones y relación de aspecto adaptables.</li>
<li>Puede incluir rascadores de pared.</li>
</ul>
</td>
<td style="border: none;">
<ul>
<li>Mezcla de productos viscosos con intercambio térmico en las paredes del depósito.</li>
<li>Puede incluir rascadores de pared.</li>
</ul>
</td>
</tr>
<tr>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/COWLES-e1587407218744.jpg"></td>
<td style="border: none;"><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/VORTEX-e1587407194504.jpg"></td>
</tr>
<tr>
<td style="border: none;">
<h3>COWLES</h3>
</td>
<td style="border: none;">
<h3>VORTEX</h3>
</td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Procesos de dispersión y homogeneización sólido-líquido.</li>
</ul>
</td>
<td style="border: none;">
<ul>
<li>Mezcla sólido-líquido en fase viscosa.</li>
<li>Bajo peso que permite un rango elevado de velocidad.</li>
</ul>
</td>
</tr>
<tr>
<td style="border: none;">
<h3><img class="aligncenter" src="https://www.sevensl.com/wp-content/uploads/2020/04/HELICE-F-e1587407206355.jpg"></h3>
</td>
<td style="border: none;">
<h3></h3>
</td>
</tr>
<tr>
<td style="border: none;">
<h3>HÉLICE-F</h3>
</td>
<td style="border: none;"></td>
</tr>
<tr>
<td style="border: none;">
<ul>
<li>Adaptación geométrica al fondo del tanque.</li>
<li>Para montar juntamente con las turbinas FULLFLOATER.</li>
<li>Mejora la suspensión de partículas, direcciona el flujo en el fondo y optimiza los procesos de descarga.</li>
</ul>
</td>
<td style="border: none;"></td>
</tr>
</tbody>
</table>[/CODE]

I would prefer to do it in the page html file rather than in the style.css general file, if it's possible.
Click to expand...
Is this what you were looking for?

Screenshot_45.png
 
Upvote 0 Downvote
Kalabagh7 said:
I have tried to open the website after eliminating all chaché of my Chrome and also the same with edge, because I thought it could be a problem of visualization.
Click to expand...
So what you need to do is add a class to all your h3 and h6, make sure h3 and h6 have different class names. Now, within the style tag, add the class selector and use the property display followed by the value inline-block. And that should work.

Let's go over this!
  1. First, let's give the headers h3 and h6 a class. It makes it easier for us to properly style those particular elements. If you are just styling h3 and h6 elements then remember you are selecting them all. But in this case we will give them classes: h3vertical1 and h3vertical.
  2. Now, think of most HTML elements as a block. Each element takes its own space or line. This is done by default but can be changed using CSS. What we want to do is give the two classes the same property and value so display: inline-block;.
    1. With this code, we are saying that we want this element to be placed on the same line rather than creating a whole different line. You will need to set both of them with this code, if not it will not work. This is because the other element will still be displayed as a block.
  3. That should be it!
CSS: 
h3 {
    background-color: red;
}

HTML: 
   <h3 class="h3vertical">FULLFLOATER-S</h3>
    <h6 class="h3vertical1">Flujo axial turbulento</h6>

developer.mozilla.org

display - CSS: Cascading Style Sheets | MDN

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
developer.mozilla.org developer.mozilla.org
CSS: 
<style>
    .h3vertical1 {
        display:inline-block;
    }
    .h3vertical {
        display:inline-block;
    }
</style>


Let me know if that works.
 
Last edited:
Upvote 0 Downvote
Ok, but how do I have to put all of this CSS? In the html page or in the general css style sheet?

Now I have something like this and it doesn0t work:

Code: 
<td style="border: none;">
<h3 class="h3vertical;" style="float: left;">FULLFLOATER-S</h3>
<h6 class="h3vertical1;" style="float: left;">Flujo axial turbulento</h6>
</td>

CSS: 
.page-id-2579 h3vertical1 {
        display:inline-block;
    }
.page-id-2579 h3vertical {
        display:inline-block;
    }
 
Upvote 0 Downvote
Hi there,

Have a look at thishttps://codeforum.org/threads/how-do-i-link-my-an-external-css-style-sheet-to-my-html-document.16/

Try assigning them all with the same class, if it doesn’t work. Give each and everyone and class, and repeat CSS step. Meanwhile I’ll come up with a more efficient solution.
 
Upvote 0 Downvote
I'll try Master

But I haven't said that I'm working with a WordPress already done website, so The page is already linked to "style.css" by default. Can I add all the code in my html page or have I to manipulate the "style.css"?

In the last post, the html I have attached is on my html page, and the CSS is at the bottom of "style.css"
 
Upvote 0 Downvote
Kalabagh7 said:
I'll try Master

But I haven't said that I'm working with a WordPress already done website, so The page is already linked to "style.css" by default. Can I add all the code in my html page or have I to manipulate the "style.css"?

In the last post, the html I have attached is on my html page, and the CSS is at the bottom of "style.css"
Click to expand...
There are settings and plugins that allow you to insert custom CSS & even JavaScript for a WordPress page, or you can modify the core stylesheet like you said.
 
Upvote 0 Downvote
Kalabagh7 said:
I'll try Master

But I haven't said that I'm working with a WordPress already done website, so The page is already linked to "style.css" by default. Can I add all the code in my html page or have I to manipulate the "style.css"?

In the last post, the html I have attached is on my html page, and the CSS is at the bottom of "style.css"
Click to expand...
Okay, I understand. Have you come up with a solution to this?
 
Upvote 0 Downvote
Master Yoda said:
Okay, I understand. Have you come up with a solution to this?
Click to expand...
To be honest, I have worked on enough WordPress installations to know that there are plugins available to insert custom CSS on a page-by-page basis, as well as custom JavaScript includes for specific pages. That is the real solution here. The alternative is for him to modify the core style.css file, or modify any other file he wishes to make changes to (JavaScript, HTML, PHP, or any other file in the system or in the view templates). Either way, those are the only two real solutions to his problem. If he did not solve it yet or try these then he should... I can guarantee that anyone following either of these 2 possible solutions for WordPress custom page CSS or JavaScript will be able to get the page working however they wish.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom