Center your wordpress site title next to your logo

My logo and website title are not aligned correctly on my site. The current setup looks like this: https://i.sstatic.net/3dUiN.png

After examining the HTML generated by WordPress, I found the following snippet:

<div id="logo" class="clearfix">
    <a href="http://localhost/test/" class="custom-logo-link" rel="home" itemprop="url"><img width="100" height="100" src="http://localhost/test/wp-content/uploads/2016/06/icon.png" class="custom-logo" alt="recette flocon advoine" itemprop="logo"></a>                     
        <h1 class="site-title"><a href="http://localhost/test/" rel="home">test test</a></h1>
        <h2 class="site-description">slogan</h2>
    </div>

I am trying to achieve a design similar to this: https://i.sstatic.net/9sdzc.png

htmlcsswordpresswordpress-theming

Answer №1

#company-logo{display: table;}
.title{display: table-cell; vertical-align:middle}

If the above code doesn't work, you can try the following: top: 50%; margin-top: - half.the.height.of.the.font.size . On a side note, "http://localhost/test/" is incorrect in many ways. Consider using "index.php / index.html" instead.

Answer №2

Enhance your h1 heading by including the following code: style="padding-top:20px;", which will give it more space between the content above and below.

<h1 class="site-title" style="padding-top:20px;>

You can adjust the padding to add more pixels if necessary for optimal spacing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display PDF on a separate tab when button is clicked in HTML

Is there a way to open a PDF in a new tab or window when a button is clicked? I've tried using onclick="window.location.href" but it always opens the PDF in the same page. Here's my code: <input type="button" value="Report" onclick="location ...

htmljsp

Identifying shifts in offsetTop

In my design, I have a page where scroll bars are not allowed, meaning all content must be visible at once. The image below shows the basic layout of the screen to give you an idea. The layout consists of two blocks - Block 1 and Block 2. Block 1 is expan ...

javascripthtmlcssangular

Update the CSS module in React dynamically

I have a canvas within my Component When the cursor enters the Canvas, I want it to change to the crosshair style. import styles from '../css/basic-styles.module.css'; const ImagePreview = () =>{ [mode,setMode] = useState(0); changeM ...

cssreactjs

Fetching jQuery library via JavaScript

Having trouble loading the JQuery library from a JavaScript file and using it in a function. JS1.js $(document).ready(function () { //var id = 728; (function () { var jq = document.createElement('script'); jq.type = 'te ...

javascriptjqueryhtmlasp.netajax

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

javascriptjqueryhtmlcssajax

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

javajavascripthtmlajax

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

Updating the email header for responding to New Order and shipped email notifications in Woocommerce

Looking for a solution to customize the reply-to email addresses specifically for New Order and Shipped emails sent to customers. I attempted to implement a suggested fix from this resource Change "reply to" email address in all Woocommerce email ...

phphtmlwoocommerce

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

javascriptphpjqueryhtml

Finding the Origin and Automatically Forwarding

I'm having an issue with my code. It's not functioning as expected. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml ...

javascripthtmljsonjsonp

What is the best way to create two responsive thumbnail columns with equal height using bootstrap?

Need help with creating responsive columns similar to a thumbnail carousel, with the image centered at the top border Struggling to figure out how to achieve this using Bootstrap. I have created a mockup in Photoshop and included a link for reference. Any ...

htmlcsstwitter-bootstrapbootstrap-4

Extracting data from an HTML table on a website

I need assistance in generating a Python dictionary mapping color names to background colors from this color palette. What is the most effective method to extract the color name strings and corresponding background color hex values? The objective is to cr ...

pythonhtmlbeautifulsoup

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

javascriptjqueryhtmlcss

Customizing text inputs in three.js

Why are the HTML textboxes disabled for input when the "render" button is working properly? I have tried changing the render.domElement to different elements on the page such as container, info, parent, and scene, but I cannot figure out the reason for t ...

javascripthtmlthree.js

What steps should I follow to ensure that the "-> comes after the text?

Here is the link to my page: . Currently, the arrow appears under the text. I am looking for a way to rearrange it so that the arrow comes after the text while still maintaining its hover effect. Can you provide any suggestions? ...

css

Avoid duplicate IDs while concealing content with media query in CSS3

Utilizing bootstrap 4 and vuejs, the desktop version includes a container with a tab pane and map. However, on mobile devices, only the map is displayed without the tab pane. The following code simplifies the issue at hand. The tab pane and map have high ...

htmlcssbootstrap-4media-queries

Retrieving information received from an XML HTTP request in node.js

Currently, I am transmitting text data from a textbox to a node.js express server using XMLHttpRequest: var text = document.getElementById("textBox").value; console.log(text); var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Fire ...

javascripthtmlnode.jsexpressxmlhttprequest

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

javascripthtmlajaxlaravel

Rows within distance

There seems to be too much space between the grid rows. I tried adding more photos or adjusting the height of the .image class to 100%, but then the image gets stretched out. The gap between items with classes .description and #gallery is too wide. When ...

htmlcssflexboxcss-grid

Ensure that the user type is verified upon logging in (using PHP)

I have set up a website with a registration and login system, and now I am looking to create an admin panel. I have assigned my account the admin usertype in MySQL, but I am not sure how to verify this usertype during login. Below is the code snippet I a ...

phphtmladmin