Align Text At Same Horizontal Align as Image

How can I align text and an image horizontally?

This is because div is a block element which will take whole width of screen , if you need it to be inline and adjust the screen use css float:left for both div which hold title and image

#header-titles{
  width:65%;
  margin-left:10%;
  text-align: left;
  float: left;
}
#header-image{
  width:20%;
  margin-right:5%;
  text-align:right;
  float: left;
}

here is your working example: http://jsfiddle.net/q9g2fj7d/34/

How do I align the text and accompanied image horizontally?

Just Convert the image vertical-align property from bottom to top.
It's better to divide your structure into divs that will make controlling of elements designs much easier.

How can i align an image next to a div horizontally

Remove the height on the second box, also vertical-align should be set to middle like you did to the img, not center

.second-div {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
}

When you set a height to the second box, while the box is aligned to the image since they have the same height, but the content inside of the box is not vertically aligned.

React Native: Vertically and Horizontally align image and text in same row

You can check here live dmeo here expo-snack:

Also the code is pretty ismple :

import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';





export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hey</Text>
        <Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    padding: 8,
    flexDirection:'row',
    alignItems:'center'


  }
});

hope it helps. feel free for doubts , and if you want the text and image to be not so distant you can have justifyContent: 'center',

CSS align images and text on same line

You can either use (on the h4 elements, as they are block by default)

display: inline-block;

Or you can float the elements to the left/rght

float: left;

Just don't forget to clear the floats after

clear: left;

More visual example for the float left/right option as shared below by @VSB:

<h4>     <div style="float:left;">Left Text</div>    <div style="float:right;">Right Text</div>    <div style="clear: left;"/></h4>

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

aligning images and text horizontally and vertically within div

You want flexible structure,you should use the div. Because the Tables are fixed. For example: The bottom cell should have same width with the top cell. They can't be different from each other. Table cells are linked to together.You cannot separate them. So you should use tables for very simple design. To put it more clearly,You should use div for flexible,complex,veried design. If you need to use the div, you should use div ;)

you can make what you want to do with using the div, this way .

http://jsfiddle.net/5aGZj/1/